type
Post
status
Published
date
slug
selector
summary
CSS 选择器语法汇总
tags
CSS
笔记
category
前端开发
icon
password
类型
日期
Mar 16, 2026
标签
概述
状态
进行中
CSS 选择器规定了 CSS 规则会被应用到哪些元素上。
备注：暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。
基本选择器
- 通用选择器
*
选择所有元素。也以将其限制为特定的名称空间或所有名称空间。
- 元素选择器：
按照给定节点的名称，选择所有匹配的元素。
- 类选择器：
.
按照给定 class 属性的值，选择所有匹配的元素。
- ID 选择器：
#
按照
id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。- 属性选择器：
[]
[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。分组选择器（Grouping selector）
选择器列表：
,, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。组合器
- 后代组合器
“ ”（空格）组合器选择前一个元素的后代节点。
- 直接子代组合器
> 组合器选择前一个元素的直接子代的节点。- 一般兄弟组合器
~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。- 紧邻兄弟组合器
+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。- 列组合器
|| 组合器选择属于某个表格行的节点。伪选择器
- 伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。- 伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。- Author:Uonlra
- URL:https://www.uonlra.blog//article/selector
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
