伪类

预计阅读时间1 分 160 views

1 作用

伪类是用于向特定的HTML元素添加特殊的状态或行为的选择器。它允许你根据元素的状态或内容的位置来选择元素，并为其应用相应的样式。常见的伪类包括:hover、:active、:first-child等。

2 语法

伪类通常紧跟在选择器的后面，以冒号（:）开头，例如:hover、:active。有些伪类可能还有参数，需要在括号内指定，例如:nth-child(n)。

3 示例

下面是一个简单的HTML示例，展示了如何在元素上应用各种伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-class Example</title>
    <style>
        /* 鼠标悬停时改变文本颜色 */
        a:hover {
            color: red;
        }

        /* 点击链接后改变背景颜色 */
        a:active {
            background-color: lightgray;
        }

        /* 第一个列表项改变背景颜色 */
        li:first-child {
            background-color: yellow;
        }

        /* 偶数行改变文本颜色 */
        tr:nth-child(even) {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">悬停在此处</a>
    <br><br>
    <a href="#">点击此链接</a>
    <ul>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ul>
    <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
    </table>
</body>
</html>

在这个示例中，我们使用了各种伪类来选择不同的元素并为其应用样式。

伪类

1 作用

2 语法

3 示例

Leave a Comment 取消回复

伪类

内容