无需登录 数据私有 本地保存

CSS选择器构造器 - 基于关系和属性构建

10
0
0
0

CSS 选择器构造器

基于关系与属性,可视化构建任意复杂度的 CSS 选择器

添加选择器片段
属性选择器
伪类/伪元素
生成的选择器 0 个匹配
特异性 (Specificity)
0 , 0 , 0 , 0
(a, b, c, d) — 分别对应内联、ID、类/属性/伪类、标签/伪元素
快速预设
测试 DOM 匹配
匹配元素将高亮显示

卡片标题 1

主要

这是第一张卡片的描述文本。

  • 列表项 A
  • 列表项 B
  • 列表项 C (highlight)

卡片标题 2

次要

第二张卡片的描述,包含嵌套span元素。

  • 列表项 D
  • 列表项 E

© 测试页脚 - 匹配测试区域

CSS 选择器常见问题

特异性使用 (a, b, c, d) 四元组表示:a 为内联样式(1或0),b 为 ID 选择器数量,c 为类选择器/属性选择器/伪类数量,d 为标签选择器/伪元素数量。通配符 * 不增加特异性。比较时从左到右,数字大的优先级高。例如:#header .nav li 的特异性为 (0,1,1,1)。

后代选择器(空格)匹配所有后代元素,无论嵌套层级多深。例如 div p 匹配 div 内所有 p 元素。子选择器(>)仅匹配直接子元素。例如 div > p 只匹配 div 的直接子 p 元素,不匹配更深层的 p。子选择器通常性能更好,因为它限制了搜索深度。

  • [attr] — 仅检查属性是否存在
  • [attr="value"] — 完全匹配属性值
  • [attr^="prefix"] — 属性值以指定字符串开头
  • [attr$="suffix"] — 属性值以指定字符串结尾
  • [attr*="substring"] — 属性值包含指定字符串
  • [attr~="word"] — 属性值包含完整单词(空格分隔)
  • [attr|="val"] — 属性值等于或以 val- 开头(常用于语言代码)

伪类用于定义元素的特殊状态。常见分类:
动态伪类::hover, :active, :focus, :visited
结构伪类::first-child, :last-child, :nth-child(n), :first-of-type
表单伪类::checked, :disabled, :enabled, :required
否定伪类::not(selector) — 排除匹配的元素
伪元素(::before, ::after)则用于创建虚拟子元素。

浏览器从右向左匹配选择器。优化建议:
1. 避免过深的后代选择器(如 div > ul > li > a
2. 优先使用类选择器而非标签选择器
3. 避免通配符 * 作为关键选择器
4. ID 选择器匹配最快,但应适度使用
5. 避免在 :not() 中使用复杂选择器
6. 合理使用子选择器 > 限制搜索范围