参考手册选择符.docx

1、一、关系选择符1.1 包含选择符(E F)选择所有被 E 元素包含的 F 元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子.E F VS. EF：/* 包含选择符(E F) */.demo div border:1px solid #f00;/* 子选择符(EF) */.demo div border:1px solid #f00;0123此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo div，那么只有 0 有边框，即只有子元素会被命中。1.2 子选择符(EF)选择所有作为 E 元素的子元素 F。与包含选

2、择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例：.demo div position: relative;子选择符此例只有 .a 会被命中，因为它是 .demo 的子元素；1.3 相邻选择符(E+F)选择紧贴在 E 元素之后 F 元素。与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。EF VS. E+F：/* 相邻选择符(E+F) */p+pcolor:#f00;/* 兄弟选择符(EF) */ppcolor:#f00;p1p2这是一个标题p3这是一个标题p4p5此例，如果使用 p + pcolor:#f00;，那么 p2, p5 将会变成红色；如果使用 p pco

3、lor:#f00;，那么 p2,p3,p4,p5 将会变成红色；1.4 兄弟选择符(EF)选择 E 元素后面的所有兄弟元素 F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。EF VS. E+F：/* 相邻选择符(E+F) */p+pcolor:#f00;/* 兄弟选择符(EF) */ppcolor:#f00;p1p2这是一个标题p3这是一个标题p4p5此例，如果使用 p + pcolor:#f00;，那么 p2, p5 将会变成红色；如果使用 p pcolor:#f00;，那么 p2,p3,p4,p5 将会变成红色；二、属性选择符2.1 Eatt选择具有

4、 att 属性的 E 元素。例如：imgalt margin: 10px;此例，将会命中第一张图片，因为匹配到了 alt 属性2.2 Eatt=“val“选择具有 att 属性且属性值等于 val 的 E 元素。例如：inputtype=“text“ border: 2px solid #000;此例，将会命中第一张 input，因为匹配到了 alt 属性，并且属性值为 text2.3 Eatt=“val“选择具有 att 属性且属性值为一用空格分隔的字词列表，其中一个等于 val 的 E 元素（包含只有一个值且该值等于 val 的情况）。例如：divclass=“a“ border: 2px

5、 solid #000;123此例，将会命中 1, 3 两个 div，因为匹配到了 class 属性，且属性值中有一个值为 a2.4 Eatt=“val“选择具有 att 属性且属性值为以 val 开头的字符串的 E 元素。例如：divclass=“a“ border: 2px solid #000;123此例，将会命中 1, 2 两个 div，因为匹配到了 class 属性，且属性值以 a 开头2.5 Eatt$=“val“选择具有 att 属性且属性值为以 val 结尾的字符串的 E 元素。例如：divclass$=“c“ border: 2px solid #000;123此例，将会命中

6、 1, 3 两个 div，因为匹配到了 class 属性，且属性值以 c 结尾2.6 Eatt*=“val“选择具有 att 属性且属性值为包含 val 的字符串的 E 元素。例如：divclass*=“b“ border: 2px solid #000;123此例，将会命中所有 div，因为匹配到了 class 属性，且属性值中都包含了 b2.7 Eatt|=“val“选择具有 att 属性且属性值为以 val 开头并用连接符“-“分隔的字符串的 E 元素，如果属性值仅为 val，也将被选择。例如：divclass|=“a“ border: 2px solid #000;123此例，将会命中

7、第一个 div，因为匹配到了 class 属性，且属性值以紧跟着“-“的 a 开头三、伪类选择符3.1 E:link设置超链接 a 在未被访问前的样式。 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这 4 种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现 超链接的 4 种状态，需要有特定的书写顺序才能生效。超链接状态顺序：a:link a:visited a:hover a:active 注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后可靠的顺序是：l(link)ov(visited

8、)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括3.2 E:focus设置对象在成为输入焦点（该对象的 onfocus 事件发生）时的样式。 webkit 内核浏览器会默认给 :focus 状态的元素加上 outline 的样式。例如：input:focus background: #f6f6f6;color: #f60;border: 1px solid #f60;outline: none;3.3 E:lang(fr)匹配使用特殊语言的 E 元素。例如：p:lang(zh-cmn-Hans) color: #f00;p:lang(en) c

9、olor: #090;大段测试文字english3.4 E:not(s)匹配不含有 s 选择符的元素 E。 有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线示例：.demo li:not(:last-child) border-bottom: 1px solid #ddd;上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线3.5 E:root匹配 E 元素在文档的根元素。在 HTML 中，根元素永远是 HTML 根据这个特性，可以做 IE8 的 Hack示例：.test color: black;color:

10、yellow0;*color: blue;_color: red;html:root .test color: purple0;上述代码：非 IE 文本将为 black，IE9 及以上为 purple，IE8 为 yellow，IE7 为 blue，IE6 为red3.6 E:first-child匹配父元素的第一个子元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E可以是 body 的子元素 这里可能存在误解：示例代码：列表项一列表项二列表项三列表项四在上述代码中，如果我们要设置第一个 li 的样式，那么代码应该写成 li:first-child

11、sRules，而不是 ul:first-childsRules。 来看这样一段代码：示例代码：p:first-childcolor:#f00;我是一个 p这段代码你能看到 p 元素被命中变成了红色 假设将代码简单地修改一下：示例代码：p:first-childcolor:#f00;我是一个标题我是一个 p只是在 p 前面加了一个 h2 标签，你会发现选择器失效了，没有命中 p，why? E:first-child 选择符，E 必须是它的兄弟元素中的第一个元素，换言之，E 必须是父元素的第一个子元素。与之类似的伪类还有 E:last-child，只不过情况正好相反，需要它是最后一个子元素。3.7

12、 E:last-child匹配父元素的最后一个子元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E可以是 body 的子元素 E:last-child 选择符，E 必须是它的兄弟元素中的最后一个元素，换言之，E 必须是父元素的最后一个子元素。与之类似的伪类还有 E:first-child，只不过情况正好相反，需要它是第一个子元素。 通过具体的例子来进行理解：有效的代码：p:last-childcolor:#f00;我是一个标题我是一个 p无效的代码：p:last-childcolor:#f00;我是一个 p我是一个标题在上述代码中，如果我们要设置第

13、一个 li 的样式，那么代码应该写成 li:first-childsRules，而不是 ul:first-childsRules。3.8 E:only-child匹配父元素仅有的一个子元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E可以是 body 的子元素示例代码：h1 font-size: 16px;li:only-child color: #f00;只有唯一一个子元素结构性伪类选择符 E:only-child有多个子元素结构性伪类选择符 E:only-child结构性伪类选择符 E:only-child结构性伪类选择符 E:only-chi

14、ld3.9 E:nth-child(n)匹配父元素的第 n 个子元素 E，假设该子元素不是 E，则选择符无效。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E可以是 body 的子元素 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素 E，那么选择符可以写成：E:nth-child(2n) 使用 E:nth-child(n)实现奇偶：示例代码：li:nth-child(2n)color:#f00; /* 偶数 */li:nth-child(2n+1)color:#000; /* 奇数 */列表项一列表项二列表项三列表项四因为(n)代表一个乘法因子，可以是 0, 1, 2, 3, ., 所以(2n)换算出来会是偶数，而(2n+1) 换算出来会是奇数 该选择符允许使用一些关键字，比如：odd, even使用 odd, even 实现奇偶：li:nth-child(even)color:#f00; /* 偶数 */li:nth-child(odd)color:#000; /* 奇数 */列表项一列表项二