• 简单选择器
• 属性选择器
• 伪类与伪元素
• 组合选择器

---

1. 简单选择器

标签选择器

p {
  color: red;
}
div {
color: black;
}

类选择器

HTML:

<p class = "example">类选择器</p>

CSS:

.example {
  color: red;
}

ID选择器

HTML:

<p id = "example">ID选择器</p>

CSS:

#example {
  color: red;
}

通用选择器

CSS:

* {
  color: red;
}

属性选择器

[attr]

选择所有包含以 attr 命名的属性的元素，不论 abbr 为何值

[example] {
  color: red;
}

[attr = val]

仅选择包含 attr 属性且属性值为 val 的元素

[example = "gray"] {
  color: #ccc;
}

伪类与伪元素

伪类

:link

设置未访问过的连接的样式

a:link {
 color: red;
}

:visited

设置访问过的链接的样式

:visited {
  color: black;
}

:hover

设置被虚指的元素的样式（例：鼠标放置于链接上但并未点击）
:hover 需放置在 :link和:visited 之后，但在 :active 之前

a:hover {
  color: blue;
}

:active

设置被激活的元素的样式（例：鼠标按在链接之上与松开之间）

a:active {
  color: green;
}

伪元素

::before

HTML:

<p class = "example">伪元素::before</p>

CSS:

p::before {
  content: "before";
}

::after

HTML:

<p class = "example">伪元素::after</p>

CSS:

p::after {
  content: "after";
}

::selection

应用于文档中被用户高亮的部分（例：鼠标选中的部分）
HTML:

<p class = "example">伪元素::selection</p>

CSS:

p::selection {
  color: red;
}

::first-letter

选中一整块文字第一行的第一个字母
HTML:

<p class = "example">伪元素::first-letter</p>

CSS:

p::first-letter {
  color: red;
  font-size: 30px;
}

::first-line

将样式只应用于一个块状元素的首行
HTML:

<p class = "example">伪元素::first-line<br />伪元素::first-line</p>

CSS:

p::first-line {
  color: red;
  font-size: 30px;
}

组合选择器

A,B

选择所有A元素和所有B元素

//选中所有div元素和所有p元素
div,p {
  color: red;
}

A B

选择A元素内部的所有B元素

//选中div元素中的所有p元素
div p {
  color: red;
}

A,B

选择所有A元素和所有B元素

//选中所有div元素和所有p元素
div,p {
  color: red;
}

A>B

选择父元素为A元素的所有B元素

//选中父元素为div元素的所有p元素
div>p {
  color: red;
}

A+B

选择紧接在A元素之后的所有B元素

//选中紧接在div元素之后的所有p元素
div+p {
  color: red;
}

---

参考链接：
CSS选择器参考手册
CSS入门教程-选择器