CSS的目标，或者说是革命纲领就是：“将样式与内容分离”，这个目标能否实现，很大程度上依赖于CSS访问内容的能力。在CSS3中，这个任务得到了有力支持，强大的结构伪类Structural pseudo-classes出现了。提供了非常丰富的查询方式，让CSS选择器变得如此和蔼可亲了。让我们来快速概览一下，同时期待着浏览器整体换代的来到，毕竟只有最新的浏览器才支持CSS3选择器及其他特性。 支持浏览器：Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+
CSS结构伪类
| Method |
Description |
| E:root |
选择文档的根结点，在HTML文档中也就是HTML节点 |
| E:first-child |
选择该节点的第一个子节点。 |
| E:last-child |
选择该节点的最后一个子节点。 |
| E:nth-child(n) |
选择指定节点的第N个子节点。
示例：
li:nth-child(1) /*选择Li元素的第一个节点*/
|
| E:nth-last-child(n) |
和上面的伪类逆序，选择指定节点从最后一个子节点开始的第N个子节点示例:
li:nth-last-child(1) /*选择Li节点的最后一个子节点*/
|
| E:nth-of-type(n) |
选择父节点之下，所有指定类型的的节点中的第N个，有点晦涩的一句话。还是看示例比较清楚：
ul li:nth-of-type(1) /*选择当前页面上所有Ul之下的第一个Li节点，包含嵌套的Ul之下的第一个Li*/
p:nth-of-type(odd) /*选择所有的奇数项的P元素，一下子解决了表格的交替背景色问题*/ |
| E:nth-last-of-type(n) |
选择父节点之下，所有指定类型的节点中倒序的第N个节点，和上面的正好顺序相反
示例：
option:nth-last-of-type(2) /*选择所有的select下倒数第二个option节点*/
option:nth-last-of-type(-n+3) /*选择倒数3个option节点，是多重选择*/ |
| E:first-of-type |
和上面的两个伪类类似，不过这个简单版，就是取第一个或者是最后一个示例:
p>quote:first-of-type /*选在所有P节点下第一个quote节点*/
|
| E:last-of-type |
同上:
tr>td:last-of-type /*选择每一行的最后一个单元格*/
|
| E:only-of-type |
选择在父节点之下，符合所有子节点中只有一个该类型节点条件的节点。又是比较难懂的一句话，也就是说，在子节点集合中，该元素必须符合指定类型，同时仅含有一个的情况。示例:
div>p:only-of-type /*s选择Div之下，如果只含有一个P节点，选择该节点*/
input[type=”radio”]:only-of-type /*如果form中，只有一个input类型为radio的，选择该input节点*/ |
| E:only-child |
和上面类似，不过更加严格，仅当符合，该父节点下仅含有一个子节点的情况。示例:
div>p:only-child /*选择那些Div下只有一个p节点的p节点*/
|
|
|
| E:empty |
选择那些没有子节点的节点，也就是选择那些叶子节点（包含text节点）. HTML注释不计入子节点数。来看一下具体例子:下面的都是空节点Empty Elements:
<p></p>
<p><!–Empty
paragraph</p>
以下都是非空节点Non Empty:
<p>Welcome to oncontextmenu=”return false;” id=KonaLink1
onmouseover=adlinkMouseOver(event,this,1);
style=”POSITION: static; TEXT-DECORATION: underline! important”
onclick=adlinkMouseClick(event,this,1); onmouseout=adlinkMouseOut(event,this,1);
href=”http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml#” mce_href=”http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml#”
target=_top>
style=”FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: blue! important; FONT-FAMILY: Courier new; POSITION: static”
color=blue> style=”FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: blue! important; FONT-FAMILY: Courier new; POSITION: relative”>JavaScript
Kit</p>
<p><b></b></p> |
| E:target |
这是一个很玄妙的伪类，可以定位到当前页面url跳转位置。还是结合示例来看：当前页面的url：http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml#该伪类可以选中跳转的anchor，在其前面加上一个箭头图标
<style
type=”text/css”>
*:target:before{
content: url(arrow.gif) /*adds an
image in front of the current active HTML
anchor*/
}
</style>
<body>
<a
href=”#whatsnew” mce_href=”#whatsnew”>Jump to what’s new</a>
<a
name=”whatsnew”></a><b>New content
1…</b>
</body>
Also see:
href=”http://www.javascriptkit.com/dhtmltutors/cssgenerate2.shtml” mce_href=”http://www.javascriptkit.com/dhtmltutors/cssgenerate2.shtml”>Added
Generated Content in CSS2. |
| :not(s) |
这个被称为逆伪类（很不准确的翻译，还是看原文吧）negation pseudo-class, “:not(s)”
选择不是指定类型的节点，节点类型由参数传入（不含伪类元素本身）示例:
:not(p) /*选择所有不是P的节点*/
input:not([type=”submit”]) /*选择所有不是submit按钮的input元素*/
option:not([selected=”selected”]) /*选择所有不是默认选中的option*/ |
|
|
| E:enabled |
选择enabled节点。示例:
input[type=”text”]:enabled /*选择所有enabled的text节点*/
input [type=”submit”]:enabled /*选择所有类型为submit，且enabled的节点*/ |
| E:disabled |
选择diabled节点。示例:
input[type=”text”]:disabled /* /*selects text boxes that
are disabled*/
input[type=”submit”]:disabled /*selects submit buttons that
are disabled*/ |
| E:checked |
选择checked节点。通常为checkbox和radiobox元素。示例:
input:checked /*selects radio or checkbox elements that are
currently checked*/
input[type=”radio”]:checked /*selects radio buttons that
are currently checked*/ |
CSS结构伪类中的表达式
在伪类“E:nth-child(n)” 和 “E:nth-of-type(n)”中，都支持参数传入，前面的例子中，我们只是简单的传入数字，选择指定位置的节点，其实这里的参数有着非常玄妙的表达式。我们来看一下：
首先他的表达式结构，或者说这个序列的通式为：
an+b
- n n为该类型元素本身或者指定数字（大于等于0的整数）位置的元素。这是一个基数。
- a 为n的系数。
- b 偏移量。
单看公式是比较难以理解的，具体看些例子好了。
p:nth-of-type(n+1) /*选择所有第一个子节点之后的子节点，含第一个，等价于全部子节点，p:nth-of-type(n)，其实是一个效果*/
p:nth-of-type(n+5) /*选择所有第五个子节点之后的节点，含第五个*/
p:nth-of-type(3n+2) /*选择，第二个，第五个，第八个节点，是一个数列，表达式即为通式。*/
tr:nth-of-type(-n+5) /*数学游戏，其实就是前五行，因为负数不具意义，所以当表达式结果为负数时，停止求值*/
tr:nth-last-child(-n+5) /*同上*/
所以原来可能让我们觉得很麻烦的交替显示，只需要这样：
option:nth-of-type(even) /*even OPTIONs in a SELECT*/
option:nth-of-type(2n) /*same as proceeding*/
option:nth-of-type(odd) /*odd OPTIONs in a SELECT*/
option:nth-of-type(2n+1) /*same as proceeding*/
大概的内容就这些了，剩下就是无尽的等待了。看他们什么时候开完会，有的时候也不只是中国人开会慢。
相关日志：
Filed under: 未分类, css3, 伪类 | 86次浏览
只能说，太强大了，文中说最新浏览器，Chrome支持吗？
“看他们什么时候开完会，有的时候也不只是中国人开会慢。”这句话不太理解 ～？～
10月 6th, 2008 at 6:34 pm
因为css3全面支持，各种标准最终发布，都是指日不可待的事情。
各方利益慢慢研究权衡去了，大道艰难啊
10月 6th, 2008 at 11:43 pm
百度Logo采用了矛盾网的建议
http://www.aorb.org/122.html
百度现在面临的问题与Google截然不同。Google面临的是如何本土化，让中国人认可它，而百度面临的问题是“信任！”。
现在百度首页Logo变成了［百度人物］，而这个人物，是美国的食品安全先驱，百度呼吁医生要有良知。
10月 7th, 2008 at 6:15 am