详解CSS3中的属性选择符网页设计 -电脑资料

tr:nth-child(2n+11) {background:#ff0; }

tr:nth-child(2n+11) { background:#ff0; }

    由于n是从为开始的，因此第一个受影响的tr元素的序号是11（2*0+11＝11,译者注）。接下来就是第13行（2*1+11=13）再接下来就第15行（2*2+11＝15），以此类推。

    那么，对于这样有用的一个选择符又有哪些浏览器支持它呢？很糟糕，据我所知，没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正（Firefox3和IE8目前是否支持？dudo）

    :nth-of-type()

    :nth-of-type()伪类和nth-child()伪类找使用方法十分相似，只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素（属于第3个子元素的p在一个该当中可能会有很多，只不过他们位于不同的父元素下，译者）：

p:nth-of-type(3) {background:#ff0; }

p:nth-of-type(3) { background:#ff0; }

    当你想确定是否已经指向了第三个p元素，这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的，但是nth-child(3)会把所有的子元素都计算进来，因此结果可能就会不一样，除非p所有的所有兄弟元素也都是p元素。

    :nth-of-type伪类目前还没有浏览器支持。

    :nth-last-of-type伪类

    :nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth－last-child伪类一样，它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中（注意：是兄弟、同级别的节点）：

p:nth-last-of-type(2) {background:#ff0; }

p:nth-last-of-type(2) { background:#ff0; }

    :nth-last-of-type()目前还没有浏览器支持。

    :last-child伪类

    :last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。下面的规则匹配所有属于父元素中最后一个子元素的p：

p:last-child {background:#ff0; }

p:last-child { background:#ff0; }

    :last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类，在Safri中存在bug（上面的规则会匹配到所有的p元素）。令人稀奇是的它可以在OmniWeb（测试版本5.1.1）中正常使用，尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归，因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。

    :first-of-type伪类

    :first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。

p:first-of-type {background:#ff0; }

p:first-of-type { background:#ff0; }

    :first-of-type伪类目前还没有浏览器支持。

    :last-of-type伪类

    :last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last－of-type(1)是一样的。

p:last-of-type {background:#ff0; }

p:last-of-type { background:#ff0; }

    :last-of-type伪类目前还没有浏览器支持。

    :only-child伪类

    :only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的（后者不够专业、简明）。

p:only-child { backgound:#ff0; }

p:only-child { backgound:#ff0; }

    :only-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child（上面的规则会被匹配到文档中所有第一个子元素p中）。

    :only-of-type伪类

    :only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同（后者专业性不够）。

p:only-of-type {background:#ff0; }

p:only-of-type { background:#ff0; }

    :only-of-type伪类目前还没有浏览器支持。

    :empty伪类

    :empty伪类指向没有任何子元素的元素。其中包括text节点，因此下面的示例只有第一行是空元素。

text

<p></p></p><p>    <p>text</p></p><p>    <p><em></em></p>

    下面的规则只匹配第一行的p元素：

p:empty {background:#ff0}

p:empty { background:#ff0 }

    :empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。

    否定伪类

    否定伪类写成:not(s)，参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如，下面的CSS将会指向所有不是p的元素：

:not(p) {border:1pxsolid#ccc; }

:not(p) { border:1px solid #ccc; }

    否定伪类目前只有基于Mozilla的浏览器支持。

    ::selection伪类

    ::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。

    下面的规则会使选中的文本颜色变为红色：

::select {color:#f00; }

::select { color:#f00; }

    ::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况，因此Safari还需要一点改进。基于Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。

    通用兄弟元素选择器

    通用兄弟元素选择器通过两个简单选择符通过波浪号（~）分隔组成。它匹配第二个简单选择符中所匹配的元素，而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素，但是第二个元素不一定必须紧跟在第一个元素之后。这条CSS规则将会匹配所有p元素之后ul元素：

p ~ ul {background:#ff0; }

p ~ ul { background:#ff0; }

    通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。

    亟需更好的浏览器支持

    部分CSS 3选择符已经被广泛支持。但是，大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它，你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。

    [附件]CSS3选择符在现在浏览器（Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27）中的支持程度（译者验证，请指正！）

    _________________IE 7________IE8________FF2_________FF3______Opera9.27

    E[foo^="bar"]______Y__________Y__________Y__________Y__________Y

    E[foo$="bar"]    ______Y__________Y__________Y__________Y__________Y

    E[foo*="bar"]    ______Y__________Y__________Y__________Y__________Y

    E:root____________ N__________N__________Y__________Y__________Y

    E:nth-child()_______ N__________N__________N__________N__________N

    E:nth-last-child()____ N__________N__________N__________N__________N

    E:nth-of-type()_____ N__________N__________N__________N__________N

    E:nth-last-of-type()__ N__________N__________N__________N__________N

    E:last-child_________ N__________N__________Y__________Y__________N

    E:first-of-type______ N__________N__________N__________N__________N

    E:only-child________ N__________N__________Y__________Y__________Y

    E:only-of-type______N__________N__________N__________N__________N

    E:empty__________ N__________N__________Y__________Y__________N

    E:target___________N__________N__________Y__________Y__________N

    E:enabled_________ N__________N__________Y__________Y__________Y

    E:disabled_________ N__________N__________Y__________Y__________Y

    E:checked_________N__________N__________N__________N__________Y

    ::selection_________N__________N__________N__________N__________N

    not()_____________N__________N__________Y__________Y__________Y

    E ~ F_____________Y__________Y__________Y__________Y__________Y

    英文原文 http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

    中文翻译 http://www.blueidea.com/tech/web/2008/5708.asp