CSS Selectors | CSS-Tricks

CSS选择器是CSS中用于选择页面元素以应用样式的基本工具。本文提供了一个全面的指南，涵盖了各种选择器和组合器的使用方法。

概述

• CSS选择器的标准文档是Selectors Module Level 4规范。
• 现代浏览器普遍支持这些选择器，除了一些例外。

快速参考

• 通用选择器（如box-sizing: border-box）。
• 类型或标签选择器（如margin-block: 1.5rem）。
• 类名选择器（如.class { text-decoration: underline; }）。
• ID选择器（如#id { font-family: monospace; }）。
• 关系选择器（如li:has(a) { display: flex; }）。

组合器

• 组合器帮助我们更具体地选择页面上的元素，类似于搜索引擎中的过滤器。
• 后代组合器（如header h1）。
• 子组合器（如header > h1）。
• 通用兄弟组合器（如h1 ~ p）。
• 相邻兄弟组合器（如h1 + p）。
• 链式组合器（如h1, p）。

一般选择器

• 选择器是CSS规则集的第一部分，用于选择要应用样式的元素。