CSS选择器（下）——高级选择器再续
以下伪类为CSS3新特性，部分新特性在前面已经说过。
⑦结构性伪类。
1):root。匹配文档的根元素。在HTML中，根元素永远是HTML。
1 <html> 2 <head> 3 <title> :root伪类示例 </title> 4 <style> 5 :root{background-color:blue} 6 </style> 7 </head> 8 9 <body> 10 <ul> 11 <li> 12 测试文字 13 </li> 14 </ul> 15 </body> 16 </html>
在火狐浏览器中能看到，整个页面背景为蓝色。
IE系列无一支持此伪类。
2):nth-child(n)。匹配父元素中的第n个子元素，注意，同:first-child一样，是引用者“作为”子元素时的样式。
1 <html> 2 <head> 3 <title> :nth-child(n)伪类示例 </title> 4 <style> 5 ul:nth-child(2){background-color:red} 6 </style> 7 </head> 8 9 <body> 10 <div> 11 <ul> 12 <li> 13 </li> 14 </ul> 15 <ul> 16 <li> 17 测试文字，这是匹配项，注意看背景色 18 </li> 19 </ul> 20 <ul> 21 <li> 22 </li> 23 </ul> 24 </div> 25 </body> 26 </html>
IE系列不支持此样式。其实我发现微软不支持所有W3C标准是有原因的，因为实际上微软可能是“希望将程序员变得傻和呆”，从他操作简单的软件就能看出来。不过我到是愿意相信他是真正希望给予用户良好的体验。
3):nth-last-child(n)。匹配父元素中的倒数第n个结构子元素。
同上，我不做赘述。下面给大家介绍一些html的规范写法。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <HTML dir="……" lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"> 3 <HEAD profile="http://……"> 4 <META content="text/html; charset=UTF-8" http-equiv="Content-Type"> 5 <TITLE> </TITLE>
以上即为比较标准的写法，还有很多属性没有罗列，比如style和script的type属性是十分必要的。其实浏览器兼容性最难解决的就是CSS，进行CSShack也是很必要的。大家可以多看看。
4):nth-of-type(n)。匹配同类型中的第n个同级兄弟元素。
请看示例：
1 <html> 2 <head> 3 <title> :nth-of-type(n)伪类示例 </title> 4 <style> 5 li:nth-of-type(2){color:red} 6 </style> 7 </head> 8 9 <body> 10 <ul> 11 <li> 12 </li> 13 <li> 14 测试文字，这是匹配项，注意看颜色 15 </li> 16 <li> 17 </li> 18 </ul> 19 </body> 20 </html>
兄弟元素是将和引用元素同级的所有元素中的同类元素。如：
1 <html> 2 <head> 3 <title> :nth-of-type(n)伪类示例 </title> 4 <style> 5 p:nth-of-type(2){color:red} 6 </style> 7 </head> 8 9 <body> 10 <p>匹配同类型中的第n个同级兄弟元素</p> 11 <h1>匹配同类型中的第n个同级兄弟元素</h1> 12 <p>匹配同类型中的第n个同级兄弟元素</p> 13 <h1>匹配同类型中的第n个同级兄弟元素</h1> 14 <p>匹配同类型中的第n个同级兄弟元素</p> 15 <h1>匹配同类型中的第n个同级兄弟元素</h1> 16 <p>匹配同类型中的第n个同级兄弟元素</p> 17 <h1>匹配同类型中的第n个同级兄弟元素</h1> 18 <p>匹配同类型中的第n个同级兄弟元素</p> 19 </body> 20 </html>
IE系列不支持此伪类。
5):nth-last-of-type(n)。匹配同类型中的倒数第n个同级兄弟元素。同上，略。
6):last-child。和:first-child差不多，只是是倒数的。
7):first-of-type。匹配同级兄弟元素中的第一个元素。
和前面的选择器没什么不同，特别是和4、5十分类似。基本等于:nth-of-type(1)。那么存在即合理，值得一提的是，n可以为表达式。
比如，下面的表达式将从第四个开始匹配每第三个元素：
1 ul li:nth-child(3n+4) { 2 color: yellow; 3 }
8):only-child。匹配属于父元素中的唯一子元素。
下面的例子摘自CSS3手册：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 p:only-child {color:#FF0000;} 7 </style> 8 <title>结构性伪类 E:only-child</title> 9 </head> 10 11 <body> 12 <div> 13 <p>匹配属于父元素中唯一子元素的E</p> 14 </div> 15 <div> 16 <p>匹配属于父元素中唯一子元素的E</p> 17 <p>匹配属于父元素中唯一子元素的E</p> 18 </div> 19 </body> 20 </html> 21
如果按照上述的写法，我的IE9是能够支持的，看来我以前说的IE9不支持有很多属于写法不规范造成的。作为一个反面教材，大家需要引以为戒，好的编码习惯是很重要的！
9):only-of-type。匹配属于同类型中唯一的兄弟元素。在CSS3手册中的例子和上一个伪类示例一模一样，他们的区别大家可以自行研究。
10):empty。匹配没有任何子元素（包括text节点）的元素。当然，我是引用了CSS3手册的原话，实际上我的理解差不多，主要是文字也算是一个子元素，但它不能有子元素。也就是说，此伪类匹配的是可以有子元素而没有子元素的元素。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 strong:empty{background-color:red;width:80 px;height:80px;display:block;margin-top:20px} 7 </style> 8 <title> :empty 示例 </title> 9 </head> 10 11 <body> 12 <p>测试</p> 13 <a href="#">测试</a> 14 <strong></strong> 15 </body> 16 </html> 17
也可以匹配所有没哟子元素的元素：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 :empty{background-color:red;width:80 px;height:80px;display:block;margin-top:20px} 7 </style> 8 <title> :empty 示例 </title> 9 </head> 10 11 <body> 12 <p></p> 13 <a href="#"></a> 14 <strong></strong> 15 </body> 16 </html> 17
⑧UI元素状态伪类。
1):checked。匹配所有用户界面（form表单）中处于选中状态的元素。和锚链接伪类用法差不多。
下面是改写自CSS3手册的示例，我觉得比较好，所以用了：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 input:checked {margin:0 50px;} 7 </style> 8 <title>UI元素状态伪类 E:checked</title> 9 </head> 10 11 <body> 12 <div style="width:733px; border: 1px solid #666; padding:5px;"> 13 <form method="post" action=""> 14 <input type="radio" name="css3" checked="checked" /> 15 <input type="radio" name="css3"/> 16 </form> 17 </div> 18 </body> 19 </html> 20
2):enabled。匹配所有用户界面（form表单）中处于可用状态的元素。
默认状态下的表单都是enabled。
一般来说下面的伪类使用更多：
3):disabled。匹配所有用户界面（form表单）中处于不可用状态的元素。
在禁用后，某些控件可以引用特殊样式。此样式十分常用。
4)::selection。匹配E元素中被用户选中或处于高亮状态的部分。
这个解释起来可能有一些麻烦，那么我直接贴上来手册上的小例子帮助大家理解：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 p::selection {background-color:#00FF00;} 7 </style> 8 <title>UI元素状态伪类 E::selection</title> 9 </head> 10 11 <body> 12 <div style="width:733px; border: 1px solid #666; padding:5px;"> 13 <p>ctrl+a 全选看效果或者使用鼠标选择文字看效果</p> 14 </div> 15 </body> 16 </html>
以上几个伪类我的IE9都支持了，开心啊。
实际上我觉得这个伪类的使用不多，可能在某些浏览器中你使用全文搜索时的高亮显示匹配项会使用这个伪类。
⑨:not(S)。匹配所有不匹配简单选择符s的元素。s是表达式。示例我又是引用了CSS3手册，算是懒了吧：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 p:not(.bg) {background-color:#00FF00;} 7 </style> 8 <title>否定伪类 E:not(s)</title> 9 </head> 10 11 <body> 12 <div style="width:733px; border: 1px solid #666; padding:5px;"> 13 <p>匹配所有不匹配简单选择符s的元素</p> 14 <p class="bg">匹配所有不匹配简单选择符s的元素</p> 15 <p>匹配所有不匹配简单选择符s的元素</p> 16 <p>匹配所有不匹配简单选择符s的元素</p> 17 <p class="mybg">匹配所有不匹配简单选择符s的元素</p> 18 <p class="bg">匹配所有不匹配简单选择符s的元素</p> 19 </div> 20 </body> 21 </html>
实际上网友们有另一种说法：否定CSS选择器:not()，可以让你定位不匹配该CSS选择器的元素。
下面是摘自网络的例子：
如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：
1 input:not([type="submit"]) { 2 width: 200px; 3 padding: 3px; 4 border: 1px solid #000000; 5 }
⑩:target。匹配相关URL指向的元素。
这个理解起来更加麻烦，我通过两个小例子来向大家解释：
第一个例子摘自CSS3手册
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="Content-Language" content="utf-8" /> 6 <meta name="robots" content="all" /> 7 <meta name="author" content="Tencent-ISRD" /> 8 <meta name="Copyright" content="Tencent" /> 9 <style type="text/css"> 10 div#content-primary:target {background-color:#FF0; font-weight:bold;line-height:24px } 11 p{ height:50px;} 12 </style> 13 <title>目标伪类 E:target 测试</title> 14 </head> 15 <body> 16 <div id="nav-primary">#nav-primary</div> 17 <div id="content-primary">#content-primary</div> 18 <div id="content-secondary">#content-secondary</div> 19 <div id="tertiary-content">#tertiary-content</div> 20 <div id="nav-secondary">#nav-secondary</div> 21 <p>提示：在地址栏的url后面输入#content-secondary，可以看到#content-primary的div出现黄色背景</p> 22 </body> 23 </html> 24
第二个我简化了一些：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 p:target{background-color:yellow} 7 </style> 8 <title> :target 示例 </title> 9 </head> 10 11 <body> 12 <div> 13 <p class="bg" id="tt">被url指向的文字</p> 14 <a href="#tt">点击此处，可以看到效果示例</a> 15 </div> 16 </body> 17 </html> 18 19
大家可能更能明白这个例子，当作为被指向的目标并且被访问时，会引用target样式。
那么本系列的CSS样式就介绍到这里，有几点需要注意：一是浏览器兼容性，二是html、css等写法规范，三是细节处理，实际上很多时候我们会在乎k字节的大小，因为宽带不能浪费。
2012-05-21 21:58:49
