选取包含
external 或者
image 属性值的元素：/* 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+
17.
X:checked
input[type=radio]:checked { border: 1px solid black;}
:checked 伪类选择器用于选取所有标记为 checked 的元素，比如单选框 (radio button) 或复选框 (checkbox)。兼容 IE9+
18.
X:after
:before 与
:after 是两个令人兴奋的伪类选择器，几乎每天都有人发明出一些新用法，这里简单介绍一下如何用它清除浮动：.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}.clearfix { *display: inline-block; _height: 1%;}
这种方式通过
:after 在元素后面添加一块区域，然后将其隐藏，可以弥补
overflow: hidden; 的缺陷。根据 CSS3 选择器标准，理论上伪类选择器应该使用双冒号，但实际上浏览器也支持单冒号的形式，所以可以继续使用单冒号。
兼容 IE8+
19.
X:hover
div:hover { background: #e3e3e3;}
最常用的伪类选择器，不多解释了，只是需要注意 IE6 不支持将
:hover 作用于除
a 链接外的其他元素。a:hover { border-bottom: 1px solid black;}
另外提醒一点：
border-bottom: 1px solid black; 的效果要比
text-decoration: underline; 好看一些。兼容 IE6+ （在 IE6 中
:hover 只能作用于链接）20.
X:not(selector)
div:not(#container) { color: blue;}
:not 伪类选择器有时会起到很重要的作用，假设现在要选取除
