CSS 选择器速查
CSS Selector 快速参考 · 语法示例 · 本地检索
全部 · 20 个
*通用选择器div元素选择器.class类选择器#idID 选择器A B后代选择器A > B子元素选择器A + B相邻兄弟选择器A ~ B通用兄弟选择器:hover鼠标悬停:active激活状态:focus获得焦点:first-child第一个子元素:last-child最后一个子元素:nth-child(n)第 n 个子元素:not(selector)否定伪类[attr]属性存在[attr=value]属性等于[attr^=value]属性开头[attr$=value]属性结尾[attr*=value]属性包含*
匹配所有元素
示例
* { margin: 0; }重置所有元素边距
CSS 选择器参考
CSS 选择器速查工具收录 CSS1 到 CSS4 全部选择器类型，包括基础选择器、组合选择器、属性选择器、伪类选择器、伪元素、结构伪类、高级选择器（:is/:where/:has）等。
功能特点
- 选择器完整：覆盖 CSS1-CSS4 全部选择器
- 浏览器支持：标注各选择器的浏览器兼容性
- 在线预览：部分选择器提供效果预览
- 示例代码：每个选择器提供使用示例
- 兼容性说明：标注新特性的支持情况
选择器分类
基础选择器
*：通用选择器element：元素选择器.class：类选择器#id：ID 选择器
组合选择器
A B：后代选择器A > B：子元素选择器A + B：相邻兄弟选择器A ~ B：通用兄弟选择器
属性选择器
[attr]：属性存在[attr=value]：属性等于[attr^=value]：属性以...开头[attr$=value]：属性以...结尾[attr*=value]：属性包含
伪类
:hover、:active、:focus：交互状态:first-child、:last-child、:nth-child(n)：位置伪类:not(selector)：否定伪类:is()、:where()、:has()：高级伪类（CSS4）
伪元素
::before、**::after**：在元素前后插入内容::placeholder：占位符样式::selection：选中文本样式
表单伪类
:checked、:disabled、:required、:valid、:invalid
使用场景
- 前端开发：快速查找选择器语法
- CSS 学习：系统学习选择器类型
- 兼容性检查：确认选择器的浏览器支持
- 高级技巧：学习 :has() 等现代选择器用法
浏览器兼容性
:is()、:where()：Chrome 88+、Firefox 78+、Safari 14+:has()：Chrome 105+、Firefox 121+、Safari 15.4+- 其他选择器：现代浏览器普遍支持