zoukankan      html  css  js  c++  java
  • CSS选择器总结

    1.CSS 属性选择器(选择符:[属性])

    属性选择器可以根据元素的属性及属性值来选择元素。

    例子 1

    如果您希望把包含标题(title)的所有元素变为红色,可以写作:

    *[title] {color:red;}
    <body>
      <h1>可以应用样式:</h1>
      <h2 title="Hello world">Hello world</h2>
      <a title="Endige" href="http://www.endige.net">Endige</a>
      <hr />
      <h1>无法应用样式:</h1>
      <h2>Hello world</h2>
      <a href="http://www.endige.net">Endige</a>
    </body>

    例子 2

    与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

    a[href] {color:red;}

    设置表单的样式

    属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:

    input[type="text"]{
      150px;
      display:block;
      margin-bottom:10px;
      background-color:yellow;
      font-family: Verdana, Arial;
    }
    
    input[type="button"]{
      120px;
      margin-left:35px;
      display:block;
      font-family: Verdana, Arial;
    }

    2.子元素选择器(选择符:>)

     如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

    ">"是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2

    比如说:

    body > p{color:red;}

    <body>
    <p>内容</p>
    <div><p>内容</p></div>
    </body>

    只有第一个匹配,第二个P是DIV的下级,因此是BODY的孙级,就不匹配了

    IE与宽度和高度的问题

    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

    #box{ 
         80px;
        height: 35px;
    }
    html>body #box{ 
         auto;
        height: auto; 
        min- 80px; 
        min-height: 35px;
    }

    3.通用选择符(选择符:*)

    "*"是通用选择符,匹配文档中的任何元素 比如说:

    body * ul{color:gray;}
    

    BODY元素的两级以下的UL元素颜色为灰色 也就是说BODY元素的任何下级UL元素不为灰色,但其他UL,不论是DIV的下级元素,还是列表项,或是表格,都会成为灰色

    * html>body
    

    至于这个我也不知道该怎么解释,范围太大了 就现在的htm文件而言,html标记已经是最外层的,body就是html的直接下级

    
    

    4.CSS 相邻兄弟选择器(选择符:+)

    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

    相邻兄弟选择器使用加号"+"

    例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

    如:

    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
    </div>

    在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。 请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

    li + li {font-weight:bold;}

    上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

    结合其他选择器

    相邻兄弟结合符还可以结合其他结合符:

    html > body table + ul {margin-top:20px;}

    这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

  • 相关阅读:
    out/host/linuxx86/obj/EXECUTABLES/aapt_intermediates/aapt 64 32 操作系统
    linux 查看路由器 电脑主机 端口号 占用
    linux proc进程 pid stat statm status id 目录 解析 内存使用
    linux vim 设置大全详解
    ubuntu subclipse svn no libsvnjavahl1 in java.library.path no svnjavahl1 in java.library.path no s
    win7 安装 ubuntu 双系统 详解 easybcd 工具 不能进入 ubuntu 界面
    Atitit.json xml 序列化循环引用解决方案json
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    Atitit.跨语言  文件夹与文件的io操作集合  草案
    Atitit.atijson 类库的新特性设计与实现 v3 q31
  • 原文地址:https://www.cnblogs.com/endige/p/2459831.html
Copyright © 2011-2022 走看看