CSS选择器

介绍

CSS选择器是CSS的核心组件，用于选择HTML文档中需要应用样式的元素。通过选择器，开发者可以精确地定位到目标元素，并为其应用样式规则。CSS提供了多种类型的选择器，满足不同的选择需求。

原理

CSS选择器的工作原理：

选择器通过匹配HTML元素的特征(如标签名、类名、ID等)来选择元素
浏览器解析CSS时，会根据选择器找到对应的HTML元素，并应用样式
选择器可以组合使用，提高选择的精确性
不同类型的选择器具有不同的优先级，影响样式的最终应用结果
选择器的优先级由特异性(specificity)决定，特异性高的选择器样式会覆盖特异性低的

图示

/* 各种类型的CSS选择器 */

element { /* 元素选择器 */ }
.class { /* 类选择器 */ }
#id { /* ID选择器 */ }

element.class { /* 元素+类选择器 */ }
element#id { /* 元素+ID选择器 */ }
.class1.class2 { /* 多类选择器 */ }

element > child { /* 子元素选择器 */ }
element descendant { /* 后代元素选择器 */ }
element + sibling { /* 相邻兄弟选择器 */ }
element ~ sibling { /* 通用兄弟选择器 */ }

[attribute] { /* 属性选择器 */ }
[attribute=value] { /* 属性值选择器 */ }
[attribute^=value] { /* 属性值开头选择器 */ }
[attribute$=value] { /* 属性值结尾选择器 */ }
[attribute*=value] { /* 属性值包含选择器 */ }

:link { /* 链接伪类选择器 */ }
:visited { /* 访问过的链接伪类选择器 */ }
:hover { /* 悬停伪类选择器 */ }
:active { /* 激活伪类选择器 */ }
:focus { /* 焦点伪类选择器 */ }

:first-child { /* 第一个子元素伪类选择器 */ }
:last-child { /* 最后一个子元素伪类选择器 */ }
:nth-child(n) { /* 第n个子元素伪类选择器 */ }
:nth-of-type(n) { /* 第n个同类型子元素伪类选择器 */ }

:not(selector) { /* 否定伪类选择器 */ }
::before { /* 前置伪元素选择器 */ }
::after { /* 后置伪元素选择器 */ }

实例

基本选择器示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器示例</title>
    <style>
        /* 元素选择器 */
        p {
            color: blue;
        }

        /* 类选择器 */
        .highlight {
            background-color: yellow;
            padding: 5px;
        }

        /* ID选择器 */
        #unique {
            font-size: 24px;
            font-weight: bold;
        }

        /* 组合选择器 */
        p.highlight {
            border: 1px solid red;
        }

        /* 后代选择器 */
        div p {
            margin-left: 20px;
        }

        /* 子元素选择器 */
        div > p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>这是一个普通段落。</p>
    <p class="highlight">这是一个带有highlight类的段落。</p>
    <div>
        <p>这是div内的段落。</p>
        <p class="highlight">这是div内带有highlight类的段落。</p>
        <span><p>这是div内span中的段落。</p></span>
    </div>
    <p id="unique">这是一个带有ID的段落。</p>
</body>
</html>

伪类和伪元素选择器示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS伪类和伪元素示例</title>
    <style>
        /* 链接伪类 */
        a:link { color: blue; }
        a:visited { color: purple; }
        a:hover { color: red; }
        a:active { color: green; }

        /* 表单伪类 */
        input:focus {
            border: 2px solid blue;
            outline: none;
        }

        /* 结构伪类 */
        ul li:first-child {
            font-weight: bold;
        }

        ul li:last-child {
            color: red;
        }

        ul li:nth-child(odd) {
            background-color: #f2f2f2;
        }

        /* 伪元素 */
        p::before {
            content: "\2014  ";
        }

        p::after {
            content: "\2014 结束";
        }

        p::first-letter {
            font-size: 2em;
            float: left;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    <br>
    <input type="text" placeholder="请输入内容">
    <br>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <p>这是一个包含伪元素的段落。</p>
</body>
</html>

专业解决方案

选择器优先级

CSS选择器的优先级由特异性(specificity)决定，优先级从高到低为：

!important声明
内联样式
ID选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
通配符选择器(*)
继承的样式

选择器组合策略

使用元素选择器定义基本样式
使用类选择器定义可复用的组件样式
谨慎使用ID选择器，仅用于唯一元素
使用组合选择器提高选择精确性
使用伪类和伪元素增强交互和视觉效果

最佳实践

保持选择器简洁，避免过度嵌套
优先使用类选择器，提高代码复用性
避免使用!important，除非有特殊需求
为选择器添加适当的注释
使用语义化的类名
避免使用通配符选择器，可能导致性能问题
了解并合理利用选择器优先级

工具推荐

CSS Specificity Calculator：计算选择器特异性的工具
SelectorGadget：辅助选择页面元素的工具
Stylelint：检查CSS代码中的选择器问题
PostCSS：提供选择器相关的插件

介绍​

原理​

图示​

实例​

基本选择器示例​

伪类和伪元素选择器示例​

专业解决方案​

选择器优先级​

选择器组合策略​

最佳实践​

工具推荐​

介绍

原理

图示

实例

基本选择器示例

伪类和伪元素选择器示例

专业解决方案

选择器优先级

选择器组合策略

最佳实践

工具推荐