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

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

万事顺遂🫰

相关推荐
YL有搞头3 分钟前
VUE的模版渲染过程
前端·javascript·vue.js·面试·模版渲染
百思可瑞教育7 分钟前
前端性能优化:请求和响应优化(HTTP缓存与CDN缓存)
前端·网络协议·http·缓存·性能优化·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
文件操作利器:showOpenFilePicker
前端·javascript
繁依Fanyi5 小时前
做一个 3D 图片画廊
前端
繁依Fanyi5 小时前
用 Electron 做一个屏幕取色器
前端
某公司摸鱼前端5 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
OEC小胖胖5 小时前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
excel5 小时前
Nuxt 3 微前端:模块导入导出与路由跳转实战
前端
大家的林语冰5 小时前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰5 小时前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6