前端应该知道的CSS3 选择器

CSS3 选择器

* 通配选择器

// 将所有margin和padding归零，不建议使用，增加浏览器负担
* {
    ...
}

// 适用于子选择器 选择#container层中的子元素
#container * {
    ...
}

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

#X ID选择器

// ID选择器不能重复使用，尽量避免使用
#container {
    ...
}

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

.X 类选择器

// 可以用于多个元素
.error {
    ...
}

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

X Y 后代选择器

// 选择li标签下的a标签
li a {
    ...
}

后代选择器的渲染速率不快，特别是在有很长的前缀元素时

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

X 标签选择器

// 选择a标签
a { ... }

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

X:visited And X:link

// 选择没有被访问过的a标签
a:link { ... }

// 选择已经被访问过的a标签
a:visted { ... }

:link作用于没有访问过的链接，:visited作用于访问过的链接。

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X + Y 相邻兄弟选择器（选一个）

// 选择ul标签后的第一个p标签
ul + p {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X ~ Y 相邻兄弟选择器（选多个）

// 选择ul标签后紧邻的所有p标签
ul ~ p {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X > Y 相邻后代选择器

// 选择div下第一个p标签，不会对之后的p标签产生影响
div > p {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Title] 属性选择器

// 选择所有带有title属性的a标签
a[title] {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Href=”Foo”] 特定值属性选择器

// 选择所有连接到a.com 的a标签
a[href="a.com"] {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Href*=”Nettuts”] 通配符属性选择器

// 选择连接地址中存在docs字段的a标签
a[href*="docs"] {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Href^=”Http”]

// 选择所有连接地址以http开头的a标签
a[href^="http"] {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Data-*=”Foo”] 多重选择器

// 选择所有data-filetype为image的a标签
a[data-filetype="image"] {
    ...
}


<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X[Foo~=”Bar”]

// 选择所有data-info含有external的a标签
a[data-info~="external"] {
    ...
}


<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X:checked 伪类选择器（选中）

// 选择为选择状态的type为radio的input标签
input[type=radio]:checked {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:after 伪类选择器（之后）

// 清除浮动
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

可以用来清除浮动、或添加元素

IE	Firefox	Chrome	Safari	Opera
8+	✔	✔	✔	✔

X:hover 伪类选择器（悬浮）

// div被鼠标悬浮时的样式
div:hover {
    ...
}

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

X:not(Selector) 伪类选择器（否定）

// 选择除p标签外所有标签
*:not(p) {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X::PseudoElement 指定选择器

// 选择p标签第一行
p::first-line {
   ...
}

// 选择p标签第一个字
p::first-letter {
   ...
}

IE	Firefox	Chrome	Safari	Opera
6+	✔	✔	✔	✔

用:: 表示，只能用于块级元素

---

X:nth-Child(N)

// 选择第三个li标签
li:nth-child(3) {
    ...
}

// 选择2的倍数的li标签
li:nth-child(2n) {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:nth-Last-Child(N)

// 选择倒数第二个li标签
li:nth-last-child(2) {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:nth-Of-Type(N) 类型选择器（正数）

// 选择第三个ul
ul:nth-of-type(3) {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:nth-Last-Of-Type(N) 类型选择器（倒数）

// 选择倒数第三个ul
ul:nth-last-of-type(3) {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:first-Child

// 第一个li标签
ul li:first-child {
    ...
}

IE	Firefox	Chrome	Safari	Opera
7+	✔	✔	✔	✔

X:last-Child

// 最后一个li标签
ul > li:last-child {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:only-Child 单独后代选择器

// 选择只有一个子并且是p标签的div
div p:only-child {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔

X:only-Of-Type

// 选择只有一个子并且是p标签的div
div p:only-Of-Type {
    ...
}

IE	Firefox	Chrome	Safari	Opera
9+	✔	✔	✔	✔