前端 CSS selector

1. CSS选择器类型及用途总览

选择器类型	主要用途	典型应用场景
基本选择器‌	选择HTML元素、类、ID等基础元素	全局样式设置、基础元素样式定义‌
组合选择器‌	通过元素间关系进行选择，如后代、子元素、相邻兄弟等	复杂布局中的元素选择，如导航菜单、卡片列表等‌
伪类选择器‌	选择元素的状态或位置，如悬停、聚焦、动态状态等	交互效果实现，如按钮悬停、表单验证、列表项高亮等‌
伪元素选择器‌	选择元素的特定部分，如首字母、首行、内容前后等	特殊排版效果，如首字下沉、内容装饰等‌
属性选择器‌	根据元素的属性及其值进行选择	表单元素样式化、特定属性元素的选择等‌

2.详细枚举值及说明

2.1 基本选择器

选择器名称	语法示例	用途说明
元素选择器	p	选择所有段落元素
类选择器	.class	选择具有特定类名的元素
ID选择器	#id	选择具有特定ID的唯一元素
通配符选择器	*	选择所有元素，常用于全局样式重置

2.2 组合选择器

选择器名称	语法示例	用途说明
后代选择器	div p	选择div元素内部的所有p元素
子元素选择器	div > p	选择div元素的直接子p元素
相邻兄弟选择器	h1 + p	选择紧接在h1元素后的第一个p元素
通用兄弟选择器	h1 ~ p	选择h1元素之后的所有同级p元素
并集选择器	p, div, a	同时选择p、div和a元素

2.3 伪类选择器

选择器名称	语法示例	用途说明
动态伪类	:hover	鼠标悬停时应用样式
目标伪类	:target	当元素是URL的锚点目标时应用样式
状态伪类	:checked	表单元素被选中时应用样式
结构伪类	:nth-child(n)	选择父元素中第n个子元素,odd表示所有奇数元素, even表示所有偶数元素(也可以使用2n)
否定伪类	:not(selector)	选择不匹配指定选择器的元素
焦点伪类	:focus	元素获得焦点时应用样式
焦点内伪类	:focus-within	元素或其内部元素获得焦点时应用样式‌

2.4 伪元素选择器

选择器名称	语法示例	用途说明
首字母伪元素	::first-letter	选择元素的首字母
首行伪元素	::first-line	选择元素的首行
内容伪元素	::before	在元素内容前插入内容
内容伪元素	::after	在元素内容后插入内容

2.5. 属性选择器

选择器名称	语法示例	用途说明
存在选择器	[attribute]	选择具有指定属性的元素
值选择器	[attribute=value]	选择属性值完全匹配的元素
前缀选择器	[attribute^=value]	选择属性值以指定值开头的元素
后缀选择器	[attribute$=value]	选择属性值以指定值结尾的元素
包含选择器	[attribute*=value]	选择属性值包含指定值的元素

2.6 选择器使用建议

• 优先使用类选择器‌：构建可复用的样式模块，提高代码可维护性
• 限制ID选择器使用‌：避免滥用导致样式难以维护
• 合理使用伪类‌：实现动态交互效果，提升用户体验‌
• 注意选择器特异性‌：理解选择器权重，避免样式覆盖问题‌