CSS 选择器

通配符

* {}

id选择器

#app {}

class选择器

.app {}

标签选择器

div {}

属性选择器

div[title='app'] {}

~=、 |=、 ^=、 $=、 *= 的区别：

• value 是完整单词：~=、 |=

• value 是拼接字符串：*=、 ^=、 $=

---

1. attribute 属性中包含 value

~=： 包含独立的单词

[title~=flower]  -->  <img title="tulip flower" />

*=： 包含这个词

[title*=flower]  -->  <img title="ffffflowerrrrrr" />

2. attribute 属性以 value 开头

|=： 必须是完整且唯一的单词，或者以 - 分隔开

[lang|=en]  -->  <p lang="en">  <p lang="en-us">

^=： 前几个字母匹配就可以

[lang^=en]  -->  <p lang="ennn">

3. attribute 属性以 value 结尾

$=： 后几个字母匹配就可以

[href$=".pdf"]  -->  <a href="/file.pdf" />

后代选择器

.app p {}

子代选择器

.app > div {}

相邻选择器

div + p {}

兄弟选择器

div ~ p {}

伪类选择器

div:hover {}

div:active {}

div:disabled {}

div:first-letter {}

div:first-line {}

div:before {}

div:after {}

图例展示

• span:first-of-type

d

p

asasasa

d

p

a

p

asas

• div:first-child

d

p

asasasa

d

p

a

p

asas

• div:nth-child(n)

d

p

asasasa

d

p

a

p

asas

• a:nth-of-type(2n)

d

p

asasasa

d

p

a

p

asas

• p:only-of-type

d

p

asasasa

d

p

a

p

asas

• span:nth-last-of-type(2n)

d

p

asasasa

d

p

a

p

asas

• a:nth-last-child(2n)

d

p

asasasa

d

p

a

p

asas

• p:last-of-type

d

p

asasasa

d

p

a

p

asas

• span:last-child

d

p

asasasa

d

p

a

p

asas

nth用法技巧

• 选择列表中的偶数标签

:nth-child(2n)

• 选择列表中的奇数标签

:nth-child(2n-1)

• 选择从第6个开始的，直到最后

:nth-child(n+6)

• 选择第1个到第6个

:nth-child(-n+6)

• 选择第6个到第9个

:nth-child(n+6):nth-child(-n+9)