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

基础选择器组合

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

  • 多类选择器

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 下面 */
}

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

万事顺遂🫰

相关推荐
知识分享小能手19 分钟前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
天天进步201521 分钟前
React Server Components详解:服务端渲染的新纪元
开发语言·前端·javascript
lvchaoq21 分钟前
react的依赖项数组
前端·javascript·react.js
qq_10055170751 小时前
WordPress给指定分类文章添加一个自动化高亮(一键复制)功能
运维·前端·自动化·php
打小就很皮...1 小时前
React实现文本markdownit形式
前端·react.js·前端框架
excel1 小时前
为什么要使用 TypeScript:TS 相比 JavaScript 的优势
前端
এ᭄请你吃糖℘2 小时前
html原生表格,实现左侧列固定
前端·html
用户21411832636022 小时前
Qwen 3-VL 实测:从图片生代码到视频提字幕,这个多模态模型有多能打?
前端
寒山李白2 小时前
npm镜像源配置指南
前端·npm·node.js
GeniuswongAir3 小时前
Flutter实现滑动页面停留吸附
前端·javascript·flutter