主题
CSS 选择器
在线学习网站
基础选择器
- 通用选择器：选择所有元素。例如：
*。 - 元素选择器：直接选择 HTML 标签，例如
p。 - 类选择器：使用
.选择指定类名的元素，例如.className。 - ID 选择器：使用
#选择指定 ID 的元素，例如#idName。 - 属性选择器：
[attr]：选择具有指定属性的元素。例如：[type]选中所有有type属性的元素。[attr=value]：选择属性等于指定值的元素。例如：[type="text"]只选中type="text"的元素。[attr~=value]：选择属性值为以空格分隔的词列表，并且其中之一等于指定值。常用于 class。例如：[class~="button"]选中class="btn button primary"这样的元素。[attr^=value]：选择属性值以指定值开头的元素。例如：[src^="https"]选中所有图片地址以 https 开头的元素。[attr$=value]：选择属性值以指定值结尾的元素。例如：[src$=".jpg"]选中所有图片地址以 .jpg 结尾的元素。[attr*=value]：选择属性值中包含指定值的元素（不分隔符）。例如：[title*="hello"]选中所有 title 属性中有 hello 的元素。[attr|=value]：选择属性值等于指定值或以“指定值-”开头的元素。常用于语言（如lang）。例如：[lang|="en"]会选中lang="en"和lang="en-US"。
分组选择器
A, B
组合选择器
- 后代选择器：选择某个元素内部的所有指定元素，用空格分隔，例如
div p选择所有位于div内的p。 - 直接子代选择器：选择某个元素的直接子元素，用
>分隔，例如ul > li选择所有位于ul直接下的li。 - 一般兄弟选择器：选择位于另一个元素之后的所有兄弟元素，用
~分隔，例如h1 ~ p选择所有在h1之后的p。 - 紧凑兄弟选择器：选择紧接在另一个元素之后的元素，用
+分隔，例如h1 + p选择紧接在h1之后的第一个p。 - 列组合器：
A || B
伪选择器
动态伪类：
:hover：当用户将鼠标悬停在元素上时生效，常用于按钮或链接的交互效果。:active：当用户点击并按住元素时生效，通常用于按钮或链接的按压效果。:focus：当元素获得焦点时生效（如用户点击输入框或使用键盘导航到某个可聚焦元素）。:focus-within：当某个元素本身或其子元素获得焦点时生效，适合用于父级元素的样式更新。
子元素选择伪类：
:nth-child(n)：选择父元素中第 n 个子元素，n 可以是数字、odd（奇数）、even（偶数），或一个公式（如 2n+1）。:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。:nth-of-type(n)：选择父元素中第 n 个指定类型（如<div>或<p>）的子元素。:first-of-type：选择父元素中第一个指定类型的子元素。:last-of-type：选择父元素中最后一个指定类型的子元素。
伪元素：
::before/::after：用于在元素内容之前或之后插入内容。::first-line/::first-letter：用于选择元素的首行或首字母。
其他：
:not(selector)：匹配不符合selector的元素，适用于排除某些样式。:invalid：匹配无效的表单输入元素（根据type、pattern或required等属性）。:lang：根据元素的语言属性（lang或xml:lang）匹配特定语言的内容。:where(selector)：匹配selector中指定的元素，优先级始终为零，适用于降低冲突风险或编写默认样式。:is(selector)：匹配selector中指定的元素，优先级由匹配的内部选择器决定，适用于优化选择器编写。