1.1 伪类
CSS中的伪类——是一种特别的关键字，可以添加到选择器后，用来表示它的状态或者在文档树中的位置。通过伪类可以根据元素的状态或者与其他元素的关系进行样式化，而不需要在HTML代码里额外添加class或者id。
伪类的主要概念
- 定义元素的状态：
- 伪类可以表示元素的状态，比如鼠标悬停、焦点或者激活状态
- 定义元素的位置：
- 伪类可以表示元素相对于其父元素或其他元素的位置，比如第一个或者最后一个元素
- 特殊情况和逻辑分组：
- 伪类还可以表示一些特殊情况，比如第一个类型的元素、奇数或偶数元素
如何使用伪类
使用伪类时需要在选择器后加一个冒号（:）。它们可以与元素选择器、类选择器、ID选择器以及其他选择器组合使用。
语法：
选择器:伪类 {
属性: 值;
}
使用示例
1. 带伪类的元素选择器
在这个示例里，所有父元素里第一个段落（<p>）将被加粗显示：
CSS
p:first-of-type {
font-weight: bold;
}
2. 带伪类的类选择器
在这个示例里，当鼠标悬停在带有类名 .button 的元素上时，它们的背景色会变成蓝色：
CSS
.button:hover {
background-color: blue;
}
3. 组合选择器与伪类
在这个示例里，带有类名 .container 的元素里的所有偶数段落（<p>）会变成红色：
CSS
.container > p:nth-child(2n) {
color: red;
}
1.2 伪类示例及其应用
1. 定义状态的伪类
定义状态的伪类可以根据用户交互或元素的状态更改其样式。
CSS
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
2. 定义位置的伪类
定义位置的伪类可以根据元素在DOM结构中的位置应用样式。
CSS
li:first-child {
font-style: italic;
}
li:last-child {
font-style: italic;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ffffff;
}
3. 用于逻辑分组的伪类
这些伪类可以根据逻辑分组或类型来样式化元素。
CSS
input:checked {
background-color: yellow;
}
input:disabled {
background-color: grey;
}
input:enabled {
background-color: white;
}
GO TO FULL VERSION