咎洁静在前端开发中，CSS选择器是精准定位HTML元素的核心工具，当被问到“css选择器有哪几种”时，许多开发者能列举出基础类型，但完整掌握其分类体系才能实现高效样式控制，本文将系统梳理CSS选择器的10大类别,配合实例代码助你构建清晰认知。
基础选择器：构建样式的基石
- 元素选择器：直接通过标签名匹配元素，如
p { color: red; }让所有段落变红。 - 类选择器：以开头匹配class属性，如
.highlight { background: yellow; }可重复应用于多个元素。 - ID选择器：以开头匹配唯一id，如
#header { height: 80px; }常用于结构定位。 - 通用选择器：
* { margin: 0; }匹配所有元素,常用于初始化样式。
组合选择器：实现精准关系定位
- 后代选择器：空格连接如
div span匹配div内所有层级的span元素。 - 子选择器：
>符号如ul>li仅匹配ul的直接子元素li。 - 相邻兄弟选择器：符号如
h2+p匹配紧跟h2后的第一个p元素。 - 通用兄弟选择器：符号如
div~p匹配div之后所有同级的p元素。
属性选择器：按特征筛选元素
通过[attr]、[attr=value]等形式实现精细控制：
[disabled]选择所有禁用元素[type="text"]精准定位文本输入框[class^="btn-"]选择class以"btn-"开头的元素[href$=".pdf"]匹配所有指向PDF的链接
伪类选择器：捕捉动态状态
伪类以开头,响应元素状态变化：
- 链接伪类：
link、visited、hover、active构成A标签的完整交互链。 - 结构伪类：
first-child、last-child、nth-child(2n+1)实现奇偶行染色。 - 状态伪类：
focus控制焦点样式，checked定制选中样式。 - 逻辑伪类：
not(.exclude)排除特定类，is(section, article)简化选择器列表。
伪元素选择器：创造虚拟内容
双冒号开头的伪元素可生成虚拟元素：
:before与:after配合content属性添加装饰内容:first-line实现首行特殊样式:selection定制用户选中文本的高亮效果
进阶选择器：现代开发利器
has()选择器：CSS4新增的父选择器，如section:has(h2)匹配包含h2的sectionwhere()与is()：简化选择器逻辑，如where(:hover, :focus)统一交互样式- 结构伪类进阶：
nth-of-type()按类型计数，empty匹配空元素
选择器优先级：理解权重计算
掌握选择器优先级是避免样式冲突的关键：
- 内联样式（1000）> ID选择器（100）> 类/属性/伪类（10）> 元素/伪元素（1）
!important规则需谨慎使用- 通用选择器与组合选择器权重计算规则
实际应用场景解析
- 响应式布局中
@media配合选择器实现条件样式 - 通过
[data-*]属性选择器实现JS-CSS交互 - 组件化开发中BEM命名规范与选择器的配合
- 性能优化视角下的选择器使用策略
掌握这10类CSS选择器，不仅能精准控制页面样式，更能提升代码可维护性，从基础到进阶，从单一选择到复合定位，系统化的选择器知识体系是前端开发者必须掌握的核心技能，下次面对“css选择器有哪几种”的问题时，相信你已能从容应对,甚至能结合实际场景给出最优解决方案。
评论列表（3条）
我是照明号的签约作者“咎洁静”
本文概览：在前端开发中，CSS选择器是精准定位HTML元素的核心工具，当被问到“css选择器有哪几种”时，许多开发者能列举出基础类型，但完整掌握其分类体系才能实现高效样式控制，本文将系统...
文章不错《CSS选择器全解析，掌握这10类让你前端开发更高效》内容很有帮助