《参考手册选择符.docx》由会员分享，可在线阅读，更多相关《参考手册选择符.docx（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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 pcolor:#f00;，那么p2,p3
3、,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:
4、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
5、 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 borde
6、r: 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种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能
7、会有不同的表现 超链接的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的样式。例如：inpu
8、t: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-bot
9、tom: 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。 要使该属性
10、生效，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，
11、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，只不过情况正好相反，需要它是第一个子元素。 通过具体的例子来进行理解：有效
12、的代码：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;只有唯一一个子元素结构性伪类选
13、择符 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:
14、#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示例
15、代码：第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
16、个子元素是否为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) 有
17、一点需要注意的是：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-las
18、t-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。 要使该
19、属性生效，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示例代码
20、：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
21、(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:em
22、pty结构性伪类选择符 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
23、;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:ta
24、rget伪类使用方法假设上述代码在页面 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 .pa
25、nel: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
26、, 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设置页面容器
27、位于装订线右边的所有页面使用的样式。仅用于page规则。 该伪类选择符只允许定义margin,padding,border和background属性 相关查看：page,:first,:left四、伪对象选择符4.1 E:first-letter/E:first-letter设置对象内的第一个字符的样式。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。 该伪类常被用来配合font-size属性和float属性制作首字下沉效果。 IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:fir
28、st-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:40p
29、x;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：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存
30、在该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;
31、p:first-line color:#090;第一行文字的颜色与其它不同今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。4.3 E:before/E:before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性 CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(:)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。 即E:before可转化为E:beforeHTML示例代码：p
32、position: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:14p