CSS选择器

原创已于 2025-08-02 15:25:39 修改 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-08-02 08:40:35 首次发布

前端专栏收录该内容

31 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSSelector</title>
    <style>
        a {
            text-decoration: none;
        }
        /*后代选择器*/
        div p {
            font: 20px 楷体;
        }
        /*子选择器*/
        div > p {
            font-size: 30px;
            color: green;
        }
        /*伪类选择器, hover表示鼠标悬停*/
        p:hover {
            color: orange;
        }
        /*超链接有四种状态*/
        /*设置超链接点击前状态*/
        a:link {
            color: black;
        }
        /*设置超链接点击后状态*/
        a:visited {
            color: blue;

        }
        a:hover {
            color: orange;
        }
        /*设置超链接点击时状态*/
        a:active {
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div>
        <p>凑崎纱夏</p>
        <span>
            <p>
                日本女歌手、舞者，<a href="https://baike.baidu.com/item/TWICE/17509021">TWICE</a>成员
            </p>
        </span>
    </div>
</body>
</html>