【CSS 选择器组合规则详解】

秋夜白2025-04-13 20:17

基础选择器组合

空格：后代选择器
> 直接子元素选择器
. 类选择器
: 伪类选择器
多类选择器

shell 复制代码

.class1.class2 ：多类组合
.class1 .class2 ：类的所有后代
.class1 > .class2 ：类的子元素

特殊选择器

shell 复制代码

:nth-child()
:nth-of-type()

html 复制代码

<div class="red">
    <p class="bold">第一层</p>
    <div class="box">
        <p class="bold">第二层</p>
    </div>
</div>

三种不同的选择器效果：

css 复制代码

/* 1. 同时具有两个类 */
.red.bold {
    /* 什么都选不到，因为没有同时具有这两个类的元素 */
}

/* 2. 直接子元素 */
.red > .bold {
    /* 只选中"第一层"，因为它是 .red 的直接子元素 */
}

/* 3. 所有后代 */
.red .bold {
    /* 选中"第一层"和"第二层"，因为它们都在 .red 下面 */
}

这种区别在构建复杂布局时特别重要，可以精确控制样式的应用范围。

万事顺遂🫰