参考手册选择符

一、关系选择符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。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例：.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 pcolor:#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选择具有 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 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此例，将会命中 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此例，将会命中第一个 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)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) color: #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: 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-childsRules，而不是 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 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我是一个标题在上述代码中，如果我们要设置第一个 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-child3.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; /* 奇数 */列表项一列表项二列表项三列表项四关键字 odd 代表奇数，even 代表偶数 有一点需要注意的是：HTML 示例代码：第 1 个 p第 2 个 p第 1 个 span第 3 个 p第 2 个 span第 4 个 p第 5 个 pCSS Case 1：p:nth-child(2)color:#f00;很明显第 2 个 p 会被命中然后变成红色CSS Case 2：p:nth-child(3)color:#f00;这是会命中第 3 个 p 么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。CSS Case 3：p:nth-child(4)color:#f00;这时你以为会命中第 4 个 p，但其实命中的却是第 3 个 p，因为它是第 4 个子元素E:nth-child(n)会选择父元素的第 n 个子元素 E，如果第 n 个子元素不是 E，则是无效选择符，但 n 会递增。假设不确定第 1 个子元素是否为 E，但是又想命中第 1 个 E，应该这样写：p:first-of-typecolor:#f00;或者这样写：p:nth-of-type(1)color:#f00;参考 E:first-of-type 和 E:nth-of-type(n)3.10 E:nth-last-child(n)匹配父元素的倒数第 n 个子元素 E，假设该子元素不是 E，则选择符无效。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E可以是 body 的子元素 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素 E，那么选择符可以写成：E:nth-last-child(1) 有一点需要注意的是：HTML 示例代码：第 1 个 p第 2 个 p第 1 个 span第 3 个 p第 2 个 span如上 HTML，假设要命中倒数第一个 p（即正数第 3 个 p） ，那么 CSS 选择符应该是：p:nth-last-child(2)color:#f00;而不是：p:nth-last-child(1)color:#f00;因为倒数第 1 个 p，其实是倒数第 2 个子元素。基于选择符从右到左解析，首先要找到第 1 个子元素，然后再去检查该子元素是否为 p，如果不是 p，则 n 递增，继续查找假设不确定倒数第 1 个子元素是否为 E，但是又想命中倒数第 1 个 E，应该这样写：p:last-of-typecolor:#f00;或者这样写：p:nth-last-of-type(1)color:#f00;参考 E:last-of-type 和 E:nth-last-of-type(n)3.11 E:first-of-type匹配同类型中的第一个同级兄弟元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 html，即 E可以是 html 的子元素，也就是说 E 可以是 body 该选择符总是能命中父元素的第 1 个为 E 的子元素，不论第 1 个子元素是否为 EHTML 示例代码：p:first-of-type color: #f00;我是一个 div 元素我是一个 p 元素我是一个 p 元素3.12 E:last-of-type匹配同类型中的最后一个同级兄弟元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 html，即 E可以是 html 的子元素，也就是说 E 可以是 body 该选择符总是能命中父元素的倒数第 1 个为 E 的子元素，不论倒数第 1 个子元素是否为 EHTML 示例代码：p:last-of-type color: #f00;我是一个 div 元素我是一个 p 元素我是一个 p 元素3.13 E:only-of-type匹配同类型中的唯一的一个同级兄弟元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 html，即 E可以是 html 的子元素，也就是说 E 可以是 body 该选择符总是能命中父元素的唯一同类型子元素 E，不论该元素的位置HTML 示例代码：p:only-of-type color: #f00;结构性伪类选择符 E:only-of-type3.14 E:nth-of-type(n)匹配同类型中的第 n 个同级兄弟元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 html，即 E可以是 html 的子元素，也就是说 E 可以是 body 该选择符总是能命中父元素的第 n 个为 E 的子元素，不论第 n 个子元素是否为 E 有一点需要注意的是：HTML 示例代码：第 1 个 p第 2 个 p第 1 个 span第 3 个 p第 2 个 span如上 HTML，假设要命中第一个 span：span:nth-of-type(1)color:#f00;如果使用 E:nth-child(n)：span:nth-child(3)color:#f00;3.15 E:nth-last-of-type(n)匹配同类型中的倒数第 n 个同级兄弟元素 E。 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 html，即 E可以是 html 的子元素，也就是说 E 可以是 body 该选择符总是能命中父元素的倒数第 n 个为 E 的子元素，不论倒数第 n 个子元素是否为 E3.16 E:empty匹配没有任何子元素（包括 text 节点）的元素 E。HTML 示例代码：p:empty height: 25px;border: 1px solid #ddd;background: #eee;结构性伪类选择符 E:empty结构性伪类选择符 E:empty3.17 E:checked匹配用户界面上处于选中状态的元素 E。(用于 input type 为 radio 与 checkbox 时)HTML 示例代码：input:checked + span background: #f00;input:checked + span:after content: “ 我被选中了“;选中下面的项试试蓝色红色黑色选中下面的项试试蓝色红色黑色3.18 E:enabled匹配用户界面上处于可用状态的元素 E。HTML 示例代码：li padding: 3px;inputtype=“text“:enabled border: 1px solid #090;background: #fff;color: #000;inputtype=“text“:disabled border: 1px solid #ccc;background: #eee;color: #ccc;E:enabled 与 E:disabled3.19 E:disabled匹配用户界面上处于禁用状态的元素 E。3.20 E:target匹配相关 URL 指向的 E 元素。 解释：URL 后面跟锚点# ，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target 选择器用于选取当前活动的目标元素。示例代码：#demo:targetcolor:#f00;E:target 伪类使用方法假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个 div 元素将会被:target 命中.test .hdpadding:10px 0;.test .navposition:fixed;right:10px;left: 540px;.test .nav adisplay:block;margin: 10px 0;.test .bd .panelwidth:500px;margin-top:5px;border:1px solid #ddd;.test .bd h2border-bottom:1px solid #ddd;.test .bd .panel:targetborder-color:#f60;.test .bd .panel:target h2border-color:#f60;h2,pmargin:0;padding:10px;font-size:16px;前往区块 1前往区块 2前往区块 3前往区块 4前往区块 5区块 1区块 1 内容区块 1 内容区块1 内容 区块 2区块 2 内容区块 2 内容区块2 内容 区块 3区块 3 内容区块 3 内容区块3 内容 区块 4区块 4 内容区块 4 内容区块4 内容 区块 5区块 5 内容区块 5 内容区块5 内容 3.21 page :first设置在打印时页面容器第一页使用的样式。仅用于page 规则。 该伪类选择符只允许定义 margin, orphans, widows 和 page breaks 相关属性 相关查看：page, :left, :rightHTML 示例代码：page :first margin: 100px 200px;div page-break-after: always;页面容器中第一页的外边距为 100px 200px页面容器中第二页的外边距为默认值3.22 page :left设置页面容器位于装订线左边的所有页面使用的样式。仅用于page 规则。 该伪类选择符只允许定义 margin, padding, border 和 background 属性 相关查看：page, :first, :right3.23 page :right设置页面容器位于装订线右边的所有页面使用的样式。仅用于page 规则。 该伪类选择符只允许定义 margin, padding, border 和 background 属性 相关查看：page, :first, :left四、伪对象选择符4.1 E:first-letter/E:first-letter设置对象内的第一个字符的样式。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。 该伪类常被用来配合 font-size 属性和 float 属性制作首字下沉效果。 IE6 在使用该选择符时有个显式的 BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该 BUG 的选择符包括： E:first-line CSS3 将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(:)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 即 E:first-letter 可转化为 E:first-letterHTML 示例代码：h1font-size:16px;pwidth:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;p:first-letter float:left;font-size:40px;font-weight:bold;line-height:1;p:first-letter float:left;font-size:40px;font-weight:bold;line-height:1;杂志常用的首字下沉效果今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。4.2 E:first-line/E:first-line设置对象内的第一行的样式。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。 IE6 在使用该选择符时有个显式的 BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该 BUG 的选择符包括： E:first-letter CSS3 将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(:)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 即 E:first-line 可转化为 E:first-lineHTML 示例代码：h1font-size:16px;pwidth:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;p:first-line color:#090;p:first-line color:#090;第一行文字的颜色与其它不同今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。4.3 E:before/E:before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和 content 属性一起使用，并且必须定义 content 属性 CSS3 将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(:)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 即 E:before 可转化为 E:beforeHTML 示例代码：pposition:relative;color:#f00;font-size:14px;font-size:09;*font-size:14px;p:beforeposition:absolute;background:#fff;color:#000;content:“如果你的能看到这段文字，说明你的浏览器只支持 E:before“;font-size:14px;p:beforeposition:absolute;background:#fff;color:#000;content:“如果你的能看到这段文字，说明你的浏览器支持 E:before 和E:before“;font-size:14px;Sorry, 你的浏览器不支持 E:before 和 E:before4.4 E:after/E:after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和 content 属性一起使用，并且必须定义 content 属性 CSS3 将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(:)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 即 E:after 可转化为 E:afterHTML 示例代码：pposition:relative;color:#f00;font-size:14px;font-size:09;*font-size:14px;p:afterposition:absolut