7.1 状态伪类
CSS中的伪类 是一些特殊的关键字，添加到选择器，用于指定元素的状态或者它在文档结构中的位置。它们允许在无法用普通选择器指定的特定状态或情况下对元素应用样式。
主要伪类：
- 状态伪类
- 结构性状态伪类
- 表单伪类
- 导航伪类
语法：
选择器:伪类 {
属性: 值;
属性: 值;
}
状态伪类
这些伪类用于根据元素的当前状态进行样式化，例如，当鼠标悬停或元素被激活时：
:hover— 当用户将鼠标悬停在元素上时应用:active— 当元素被激活时应用（通常是点击时）:focus— 当元素获得焦点时应用（例如使用键盘时）:visited— 应用于访问过的链接:link— 应用于未访问的链接
7.2 伪类 hover
伪类 :hover 在当用户将鼠标指针悬停在元素上时应用。它常用于在悬停时改变链接和按钮的外观。
语法：
选择器:hover {
属性: 值;
属性: 值;
}
例子：
这个选择器在鼠标悬停时改变文本颜色并给链接加下划线。
HTML
<a href="#">链接示例</a>
CSS
a:hover {
color: red;
text-decoration: underline;
}
应用：
- 通过视觉反馈提升用户交互（UI）
- 用于按钮、链接及其他交互元素
7.3 伪类 focus
伪类 :focus 在元素获得焦点时应用。例如，当它被点击或者通过Tab键进入时。最常用于输入框及其他表单元素。
语法：
选择器:focus {
属性: 值;
属性: 值;
}
例子：
这个选择器在输入框获得焦点时改变边框颜色并移除轮廓。
HTML
<input type="text" name="text" id="text">
CSS
input:focus {
border-color: blue;
outline: none;
}
应用：
- 提升网页的可访问性（accessibility）
- 让交互元素在聚焦时更显眼
7.4 伪类 nth-child
伪类 :nth-child 根据元素在父元素子元素中的位置进行应用。它接受一个参数，可以是数字、关键字或表达式。
语法：
选择器:nth-child(n) {
属性: 值;
属性: 值;
}
例子：
这个选择器可以根据兄弟元素的位置对元素应用样式。
HTML
<ul>
<li>元素 1</li>
<li>元素 2</li>
<li>元素 3</li>
<li>元素 4</li>
<li>元素 5</li>
<li>元素 6</li>
<li>元素 7</li>
</ul>
CSS
/* 设置所有奇数子元素的样式 */
li:nth-child(odd) {
background-color: lightgray;
}
/* 设置所有偶数子元素的样式 */
li:nth-child(even) {
background-color: lightblue;
}
/* 设置第二个子元素的样式 */
li:nth-child(2) {
color: red;
}
应用：
- 对表格行、列表元素及其他重复结构进行样式化
- 无需添加额外类即可创建复杂布局和样式
7.5 伪类使用示例
HTML
<button type="button">按钮</button>
CSS
button:hover, button:focus {
background-color: darkblue;
color: white;
}
对偶数行的表格进行样式化：
HTML
<table>
<tr>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
<tr>
<td>商品 1</td>
<td>5</td>
<td>10 元</td>
</tr>
<tr>
<td>商品 2</td>
<td>3</td>
<td>15 元</td>
</tr>
<tr>
<td>商品 3</td>
<td>8</td>
<td>7 元</td>
</tr>
</table>
CSS
tr:nth-child(even) {
background-color: #f2f2f2;
}
排除某些元素的通用样式：
HTML
<ul>
<li class="list-item">元素 1</li>
<li class="list-item">元素 2</li>
<li class="list-item">元素 3</li>
<li class="list-item">元素 4</li>
<li class="list-item">元素 5</li>
<li class="list-item">元素 6</li>
<li class="list-item">元素 7</li>
</ul>
CSS
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION