不过，这样很蛋疼，效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢？
<a href=”path/to/image.jpg” data-filetype=”image”> Image Link </a>
这样关联后，我们就能使用标准的属性选择器来指定这些链接啦。看下面：
a[data-filetype=”image”] {
color: red;
}
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
16. X[foo~=bar]
a[data-info~=”external”] {
color: red;
}
a[data-info~=”image”] {
border: 1px solid black;
}
这儿有个鲜为人知的特殊技巧，绝对让你印象时刻。~(tilda)符，它可以帮助我们指向那些以空格隔开多个值的属性的元素（真拗口，这翻译我自己都看不懂，水平问题）
以我们第15条的自定义属性为例，上面的代码中我们创建了 data-info属性，这个属性可以定义以空格分隔的多个值。这样，这个链接本身就是个icon，并且指向的也是一个图片链接，像下面这样。
<a href=”path/to/image.jpg” data-info=”external image”> Click Me, Fool </a>
有了这样适当的标记，通过使用 ~ 属性选择器的技巧，我们就可以指向任何具有着两种属性的任何一种啦。
/* Target data-info attr that contains the value “external” */
a[data-info~=”external”] {
color: red;
}
/* And which contain the value “image” */
a[data-info~=”image”] {
border: 1px solid black;
}
很棒，不是吗？
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
17. X:checked
input[type=radio]:checked {
border: 1px solid black;
}
这种伪类只会匹配已经被选中的单选元素。就是这么简单。
查看例子
兼容性
•E9+
•Firefox
•Chrome
•Safari
•Opera
18. X:after
before 和 after 伪元素也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。
很多第一次使用是因为他们需要对clear-fix进行改进。
复制代码
.clearfix:after {
content: “”;
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
} </p>
<p>.clearfix {
*display: inline-block;
_height: 1%;
}
这个改进使用了:after伪类元素来在元素后增加一个空间，然后清除它。这个牛X的技巧你应该收藏到工具包里，特别是当overflow:hidden方法无能为力的时候。
