16. X[foo~="bar"]1 2 3 4 5 6 7 | a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
|
这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个`~`符号可以定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子，我们可以设置一个`data-info`属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。 1 | <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
|
给这些元素设置了这个标志之后，我们就可以使用`~`来定位这些标签了。 1 2 3 4 5 6 7 8 9 | a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
|
## 17. X:checked 1 2 3 | input[type=radio]:checked {
border: 1px solid black;
}
|
上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。
DEMO
兼容性 IE9+ Firefox Chrome Safari Opera
18. X:after`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用`.clear-fix`技巧时许多属性都是第一次被使用到里面的。 1 2 3 4 5 6 7 8 9 10 11 12 13 | .clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
|
上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当`overflow:hidden`方法不顶用的时候，这招就特别管用了。
还想看其他创造性的使用这个伪类，看[这里](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/)。 根据CSS3标准规定，可以使用两个冒号`::`。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。 兼容性 IE8+ Firefox Chrome Safari Opera
19. X::hover1 2 3 | div:hover {
background: #e3e3e3;
}
|
不用说，大家肯定知道它。官方的说法是`user action pseudo class`.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。 注意旧版本的IE只会对加在锚点`a`标签上的`:hover`伪类起作用。 通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。 1 2 3 | a:hover {
border-bottom: 1px solid black;
}
|
专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。 兼容性 IE6+(IE6只能在锚点标签上起作用) Firefox Chrome Safari Opera
20. X:not(selector)1 2 3 | div:not(#container) {
color: blue;
}
|
`取反`伪类是相当有用的，假设我们要把除`id`为`container`之外的所有`div`标签都选中。那上面那么代码就可以做到。 或者说我想选中所有出段落标签之外的所有标签。 1 2 3 | *:not(p) {
color: green;
}
|
DEMO
兼容性 IE9+ Firefox Chrome Safari Opera
21. X::pseudoElement1 2 3 4 | p::first-line {
font-weight: bold;
font-size:1.2em;
}
|
我们可以使用`::`来选中某标签的部分内容，如地一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。 伪标签是由两个冒号 :: 组成的。 定位第一个字 1 2 3 4 5 6 7 | p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
|
上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。 它通常在一些新闻报刊内容的重点突出会使用到。 定位某段的第一行 1 2 3 4 | p::first-line {
font-weight: bold;
font-size: 1.2em;
}
|
跟`::first-line`相似，会选中段落的第一行 。 为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。 DEMO
兼容性 IE6+ Firefox Chrome Safari Opera
22. X:nth-child(n)1 2 3 | li:nth-child(3) {
color: red;
}
|
还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么，有了`nth-child`那日子就一去不复返了。 请注意`nth-child`接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`. 我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用`li:nth-child(4n)`去每隔3个元素获取一次标签。
DEMO
兼容性 IE9+ Firefox3.5+ Chrome Safari
23. X:nth-last-child(n)1 2 3 | li:nth-last-child(2) {
color: red;
}
|
假设你在一个`ul`标签中有N多的元素，而你只想获取最后三个元素，甚至是这样`li:nth-child(397)`，你可以用`nth-last-child`伪类去代替它。 这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。
DEMO
兼容性 IE9+ Firefox3.5+ Chrome Safari Opera
24. X:nth-of-type(n)1 2 3 | ul:nth-of-type(3) {
border: 1px solid black;
}
|
曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。 想象一下有5个`ul`标签。如果你只想对其中的第三个进行修饰，而且你也不想使用`id`属性，那你就可以使用`nth-of-type(n)`伪类来实现了，上面的那个代码，只有第三个`ul`标签会被设置边框。
DEMO
兼容性 IE9+ Firefox3.5+ Chrome Safari
25. X:nth-last-of-type(n)1 2 3 | ul:nth-last-of-type(3) {
border: 1px solid black;
}
|
同样，也可以类似的使用`nth-last-of-type`来倒序的获取标签。 兼容性 IE9+ Firefox3.5+ Chrome Safari Opera
26. X:first-child1 2 3 | ul li:first-child {
border-top: none;
}
|
这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。 假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
DEMO
兼容性 IE7+ Firefox Chrome Safari Opera
27. X:last-child1 2 3 | ul > li:last-child {
color: green;
}
|
跟`first-child`相反，`last-child`取的是父标签的最后一个标签。 例如
标签 1 2 3 4 5 | <ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
|
这里没啥内容，就是一个了 List。 1 2 3 4 5 6 7 8 9 10 11 12 13 | ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
|
上面的代码将设置背景色，移除浏览器默认的内边距，为每个`li`设置边框以凸显一定的深度。
DEMO 兼容性 IE9+ Firefox Chrome Safari Opera
28. X:only-child1 2 3 | div p:only-child {
color: red;
}
|
说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。 它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的`div`才被着色。 1 2 3 4 5 6 | <div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
|
上面例子中，第二个`div`不会被选中。一旦第一个`div`有了多个子段落，那这个就不再起作用了。
DEMO
兼容性 IE9+ Firefox Chrome Safari Opera
29. X:only-of-type1 2 3 | li:only-of-type {
font-weight: bold;
}
|
结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签？ 使用`ul li`会选中所有`li`标签。这时候就要使用`only-of-type`了。 1 2 3 | ul > li:only-of-type {
font-weight: bold;
}
|
DEMO
兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera
30. X:first-of-type `first-of-type`伪类可以选择指定标签的第一个兄弟标签。 测试 1 2 3 4 5 6 7 8 9 10 11 12 | <div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
|
来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。 解决办法1
办法很多，我们看一些比较方便的。首先是`first-of-type`。 1 2 3 | ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
|
找到第一个`ul`标签，然后找到直接子标签`li`，然后找到第二个子节点。
解决办法2
另一个解决办法就是邻近选择器。 1 2 3 | p + ul li:last-child {
font-weight: bold;
}
|
这种情况下，找到`p`下的直接`ul`标签，然后找到它的最后一个直接子标签。 解决办法3
我们可以随便玩耍这些选择器。来看看： 1 2 3 | ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
|
先获取到页面上第一个`ul`标签，然后找到最后一个子标签。
DEMO
兼容性 IE9+ Firefox 3.5+ Chrome Safari Opera
结论 如果你想向旧版本浏览器妥协，比如IE6，那你用这些新的选择器的时候还是得小心点。但别别让IE6组织你去学这些新的技能。那你就对自己太残忍了。记得多查查[兼容性列表](http://www.quirksmode.org/css/contents.html)，或者使用[Dean Edward's excellent IE9.js script ](http://code.google.com/p/ie7-js/)来让你的浏览器具有这些特性。
第二个，使用向jQuery的时候，尽量使用原生的CSS3选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。 [英文原文：tutsplus ，译文首发：译邻] | 
