css2

Element:link (仅用于a标签)

IE6+
设置超链接a在未被访问前的样式
a:link {
  color: red;
}
...
<a href="#" >link</a>

Element:visited (仅用于a标签)

IE6+
设置超链接a在其链接地址已被访问过时的样式
a:visited{
  color: green;
}
...
<a href="#" >visited</a>

Element:hover

IE7+
设置元素在其鼠标悬停时的样式
div:hover {
  color: blue;
}
...
<div>hover</div>

Element:active

IE8+
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
div:active  {
  color: blue;
}
...
<div>active </div>

Element:focus (对应onfocus事件)

IE8+
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式
webkit内核浏览器会默认给:focus状态的元素加上[outline]的样式
div:focus  {
  color: red;
}
...
<input value="focus" />

Element:lang(zh-cn) (匹配使用特殊语言的E元素)

IE8+
匹配使用特殊语言的元素
...
p:lang(zh-cn) {
  font-size: 24px;
  color: green;
}
p:lang(en-us) {
  color: red;
}
...
<p lang="zh-cn">中文</p>
<p lang="en-us">English</p>

Element:first-child

IE7+
匹配父元素的第一个子元素
...
div:first-child {
  color: red;
}
...
<div>
  <p>color</p>
</div>

css3

Element:not(selector)

IE9+
匹配不含有selector选择符的元素
...
p:not([lang="zh-cn"]) {
  color:red;
}
...  
<p lang="zh-cn">中文</p>
<p lang="en-us">English</p>

Element:root

IE9+
匹配元素在文档的根元素(HTML中，根元素是HTML)

Element:last-child

IE9+
匹配父元素的最后一个子元素
...
div:last-child {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:only-child

IE9+
匹配父元素（仅有一个子元素）
...
p:only-child {
  color: red;
}
...
<div>
  <p>color</p>
</div>
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-child(add)

IE9+
匹配父元素的第n个子元素
...
div > p:nth-child(odd) { /* 奇数 odd/2n+1 */
  color: red;
}
div > p:nth-child(even) {/* 偶数 2n */
  color: green;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-last-child(n)

IE9+
匹配父元素的倒数第n个子元素
...
div > p:nth-last-child(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:first-of-type

IE9+
匹配同类型中的第一个同级兄弟元素
...
p:firs-of-type {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:last-of-type

IE9+
匹配同类型中的最后一个同级兄弟元素
...
p:last-of-type {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:only-of-type

IE9+
匹配同类型中的唯一的一个同级兄弟元素
...
p:only-of-type {
  color: red;
}
...
<div>
  <p>color></p>
</div>

Element:nth-of-type(n)

IE9+
匹配同类型中的第n个同级兄弟元素
...
p:nth-of-type(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-last-of-type(n)

IE9+
匹配同类型中的倒数第n个同级兄弟元素
...
p:nth-last-of-type(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:empty

IE9+
匹配没有任何子元素（包括text节点）的元素
...
p:empty {
  height: 30px;
  background-color: red;
}
...
<div>
  <p></p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:checked

Element:disabled

Element:target

兼容浏览器版本

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0+/ 7.0+ /8.0+/9.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+

css2

@page:first

@page:left

@page:right