伪类选择器（精细元素修饰）
1.超链接相关
:link “链接”：超链接点击之前（只适用于a）
1
:visited “访问过的”：链接被访问过之后（只适用于a）
2
:hover “悬停”：鼠标放到标签上的时候（适用于所有标签）
3
:active “激活”： 鼠标点击标签，但是不松手时。（适用于所有标签）
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
color:black;
好的！下面是为你提供的代码添加的**通俗易懂的中文注释**，帮助你理解每一行 CSS 的作用。
```html
<style>
/*
a:link 表示“还没点过的超链接”
把它设置成红色
*/
a:link {
color: red;
}
/*
a:visited 表示“已经点过的超链接”
把它设置成橙色
*/
a:visited {
color: orange;
}
/*
a:hover 表示“鼠标放上去时”的状态
鼠标悬停在链接上，文字变绿色
*/
a:hover {
color: green;
}
/*
a:active 表示“正在点击的那一瞬间”
点击链接时，文字变成黑色（松开鼠标就恢复）
*/
a:active {
color: black;
}
/*
所有的 div 元素：
宽 100px，高 100px，背景是红色
*/
div {
width: 100px;
height: 100px;
background-color: red;
}
/*
当鼠标放到 div 上时（悬停）
背景颜色从红色变成绿色
*/
div:hover {
background-color: green;
}
/*
当正在点击 div 的那一瞬间
背景颜色变成橙色（松开就恢复）
*/
div:active {
background-color: orange;
}
/*
所有的 span 元素：
宽 50px，高 30px，文字垂直居中（用 line-height 实现）
文字白色，背景绿色
*/
span {
width: 50px;
height: 30px;
line-height: 30px; /* 让单行文字垂直居中 */
color: #fff; /* 白色文字 */
background-color: green;
}
/*
当鼠标放到 span 上时
背景从绿色变成橙色
*/
span:hover {
background-color: orange;
}
/*
当正在点击 span 的那一瞬间
背景变成红色（松开后恢复）
*/
span:active {
background-color: red;
}
</style>
</head>
<body>
<!--
这是一个超链接，指向 itbaizhan.com
你会看到：没点过是红色，点过后变橙色
鼠标放上去变绿，点击瞬间变黑
-->
<a href="https://itbaizhan.com">itbaizhan</a>
<!--
这是一个红色的小方块（div）
鼠标放上去变绿，点击时变橙
-->
<div></div>
<!--
注意：页面中没有写 span 标签
所以 span 的样式目前不会显示出来
如果你想看到效果，可以加上：
<span>按钮</span>
-->
</body>
```
---
### ✅ 小贴士总结：
| 伪类 | 通俗理解 | 触发方式 |
|------|----------|----------|
| `:link` | 没点过的链接 | 初始状态 |
| `:visited` | 点过的链接 | 浏览器记录历史后 |
| `:hover` | 鼠标放上去 | 移入元素 |
| `:active` | 正在点击 | 鼠标按下未松开 |
> 💡 **注意顺序建议：** `:link` → `:visited` → `:hover` → `:active`
> 这个顺序叫 **LVHA**，能避免样式被覆盖，是最佳实践！
这样注释后，是不是一眼就看懂每个样式的作用啦？😊
:first-child
选择器
定义
:first-child
选择器匹配其父元素中的第一个子元素
实例
列表中的第一个
<li>
元素选择的样式
li:first-child{
background:yellow;
}
:last-child
选择器
定义
:last-child
选择器用来匹配父元素中最后一个子元素
实例
指定最后一个p元素的背景色
}
16
li:first-child{
p:last-child{
background:#ff0000;
}
:nth-child()
选择器
定义
:nth-child(n)
选择器匹配父元素中的第 n 个子元素，元素类型没有限制
n 可以是一个数字，一个关键字
ul li:nth-child(2){
color: green;
}
实例
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是
奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数
和偶数p元素指定两个不同的背景颜色
p:last-child{
background:#ff0000;
}
1
2
odd表示奇数元素，even表示偶数元素
p:nth-child(odd){
background:#ff0000;
}
p:nth-child(even){
background:#0000ff;
}
:only-child
选择器
定义
:only-child
选择器匹配属于父元素中唯一子元素的元素
p:only-child{
background:#ff0000;
}
:empty
选择器
定义
:empty
选择器选择每个没有任何子级的元素（包括文本节点）
p:empty{
background:#ff0000;
}
只能用于选择空元素
:not()
选择器
定义
:not(selector)
选择器匹配每个元素是不是指定的元素/选择器
实例
为每个并非
<p>
元素的元素设置背景颜色
也就是说不是这个元素的都要被这个css修饰定位
:not(p){
background:#ff0000;
}
:focus
选择器
定义
:focus
选择器用于选择具有焦点的元素
也就是说在输入时输入框的特效
实例
一个输入字段获得焦点时选择的样式
input:focus{
background-color:yellow;
}
:checked
选择器
定义
:checked
选择器匹配每个选中的输入元素（仅适用于单选按钮或复选
框）
在选择的时候点击选项的特效
input:checked {
height: 50px;
width: 50px;
}
伪对象选择器
before，after
选择器在被选元素的“内容”前面或后面插入内容，用来和
content
属性一起使用。
也就是说在被选择元素前面后面插入不属于元素的css虚拟模块
虽然
E:before/after
可转化为
E::before/after
，但是你写伪元素是要规范，用
两个冒号
<ul>
<li>刘亦菲</li>
<li>范冰冰</li>
<li>杨幂</li>
<li>袁姗姗</li>
</ul>
ul::before{
content:"这是ul的伪元素";
color: blue;
}
ul::after{
content:"这是之后的伪元素";
}
属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于
class
和
id
属性
[attribute]
用于选取带有指定属性的元素
[attribute=value]
用于选取带有指定属性和值的元素
[attribute~=value]
用于选取属性值中包含指定词汇的元素
[attribute|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]
匹配属性值以指定值开头的每个元素
[attribute$=value]
匹配属性值以指定值结尾的每个元素
[attribute*=value]
匹配属性值中包含指定值的每个元素
a[target]{
background-color:yellow;
}
接下来是各种属性选择器的详解：
[attribute] 选择器
定义
[attribute] 选择器用于选取带有指定属性的元素
实例
为带有
target
属性的
<a>
元素设置样式
a[target]{
background-color:yellow;
}
[attribute=value] 选择器
定义
[attribute=target] 选择器用于选取带有指定属性和值的元素
实例
为 target="_blank" 的
<a>
元素设置样式
a[target=_blank]{
background-color:yellow;
}
<style>
a[target=_self]{
color: red;
}
p[class]{
color: green;
}
</style>
</head>
<body>
<a href="#" target="_blank">带有target属性</a>
<a href="#" target="_self">不带有target属性</a>
[attribute~=value] 选择器
定义
[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素
实例
选择 titile 属性包含单词 "flower" 的元素，并设置其样式
[title~=flower]{
background-color:yellow;
}
<style>
p[class~=fix]{
color: red;
}
</style>
</head>
<body>
<p class="title clear">第一个p标签</p>
<p class="title fix">第二个p标签</p>
[attribute|=value] 选择器
定义
[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元
素
温馨提示
该值必须是整个单词，比如
lang="en"
，或者后面跟着连字符，比
如
lang="en-us
实例
选择 lang 属性值以 "en" 开头的元素，并设置其样式
[lang|=en]{
background-color:yellow;
}
p[class|=en]{
color: red;
}
</style>
</head>
<body>
<p class="en-hello">我是第一个p</p>
<p class="zh-hello">我是第二个p</p>
[attribute^=value] 选择器
定义
[attribute^=value] 选择器匹配属性值以指定值开头的每个元素
实例
设置 class 属性值以 "test" 开头的所有 div 元素的背景色
div[class^="test"]{
background:#ffff00;
}
p[class^=zh]{
color: red;
}
<p class="zhhello">我是第二个p</p>
<p class="zh-hello">我是第二个p</p>
[attribute$=value] 选择器
定义
[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素
实例
设置 class 属性值以 "test" 结尾的所有 div 元素的背景色
div[class$="test"]{
background:#ffff00;
}
p[class$=world]{
color: red;
}
</style>
</head>
<body>
<p class="helloworld">第一个p元素 </p>
[attribute*=value] 选择器
定义
[attribute*=value] 选择器匹配属性值包含指定值的每个元素
实例
设置 class 属性值包含 "test" 的所有 div 元素的背景色
div[class*="test"]{
background:#ffff00;
}
p[class*=name]{
color: red;
}
</style>
</head>
<body>
<p class="hellomyname">标签1</p>
