CSS：选择器

关注

原创最新推荐文章于 2026-06-21 09:04:13 发布 138 阅读 AI 写同款· GEO 优化 ›

【高频考点精讲】CSS :is()和:where()选择器：如何简化复杂的选择器写法？ is()和:where()就像CSS选择器中的"瑞士军刀"，能大幅简化复杂的选择器写法。需要合并选择器时优先考虑使用它们关注优先级影响，:where()适合低优先级场景注意书写顺序对性能的影响在组件库开发中善用:where()避免样式污染记住，好的CSS代码不仅要能工作，还要像诗一样优雅。希望这篇文章能帮你写出更漂亮的CSS！全栈老李会持续分享更多前端干货，下期见！阅读详情

CSS：选择器

1. 标签选择器

按标签名挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

2. 类选择器

按类名挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        .test {
            color: red;
        }
    </style>
</head>
<body>
    <p class="test">类选择器</p>
</body>
</html>

3. ID选择器

按id值挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        #p1 {
            color:green;
        }
    </style>
</head>
<body>
    <p id="p1">id选择器</p>
</body>
</html>

4. 选择器组

同时多种选择条件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        .test, #p1 {
            color:red;
        }
    </style>
</head>
<body>
    <p class="test">类选择器</p>
    <p id="p1">id选择器</p>
</body>
</html>

5. 派生选择器

5.1. 后代选择器

选择某元素的子孙

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        #p5 b {
            color: red;
        }
    </style>
</head>
<body>
    <p id="p5">
        人生一世，草木一<b>秋</b>。
    </p>
</body>
</html>

5.2. 子元素选择器

选择某元素的儿子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        #p5>b {
            color: red;
        }
    </style>
</head>
<body>
    <p id="p5">
        人生一世，草木一<b>秋</b>。
    </p>
</body>
</html>

6. 交集选择器

由两个选择器构成
第一个必须是标签选择器
第二个必须是类或id选择器

<!DOCTYPE html>
<html>
<head>
    <title>交集选择器</title>
    <style type="text/css">
        p.txt {
            color: red;

        }
    </style>
</head>
<body>
    <p>恰是一江<strong class="txt">春水</strong>向东流</p>
</body>
</html>

7. 并集选择器

同时选择多个采用某个样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        h1, p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>并集选择器</h1>
    <p>并集选择器</p>
</body>
</html>

8. 通配符*

选择所有元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1>通配符选择器</h1>
    <p>通配符选择器</p>
</body>
</html>

9. 伪类选择器

根据元素状态选择元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        /*未访问的链接*/
        a:link {
            color: green;
        }
        /*已访问的链接 */
        a:visited {
            color: red;
        }
        /*当有鼠标悬停在链接上 */
        a:hover {
            color: blue;
        }
        /*被选择的链接 */
        a:active {
            color: blueviolet;
        }
        /*选择有焦点(光标)的框*/
        a:focus {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>