- 简单选择器
- 属性选择器
- 伪类与伪元素
- 组合选择器
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入门教程-选择器
