Firefox开发者工具为何删除CSS选择器的:nth-of-type(2)片段？

算力阿峰

2026-7-3

问题解答

你的CSS选择器本身没有错误

.super-attribute-select option:nth-of-type(2) 是完全合法的CSS选择器，它可以精准匹配.super-attribute-select元素下的第二个<option>子元素，也就是你代码里的XXL选项。因为<select>的子元素全是<option>，所以用:nth-child(2)替代也能达到同样效果。

Firefox开发者工具自动删除伪类的原因

这大概率是Firefox DevTools选择器搜索框的自动修正/补全机制的小bug，或是旧版本工具的兼容性问题：

当你在检查面板的选择器输入框输入内容时，工具会实时校验并匹配元素，如果它的校验逻辑误判了伪类的合法性，就会自动删除这部分内容。
少数情况下，也可能是页面DOM在输入选择器时发生了动态变化（比如<select>选项被JS重新渲染），导致工具认为选择器无法匹配元素，从而触发自动修正。

在Firefox DevTools中测试完整选择器的方法

有几种可靠方式可以绕过选择器输入框的问题，验证你的选择器：

控制台直接查询：打开控制台（快捷键Ctrl+Shift+K），输入 document.querySelectorAll('.super-attribute-select option:nth-of-type(2)')，回车后查看返回结果，正常应该只包含XXL对应的<option>元素。
临时添加样式规则验证：打开「样式编辑器」（快捷键Shift+F7），新建临时样式表，添加规则：
```
.super-attribute-select option:nth-of-type(2) {
  color: red !important;
}
```
如果XXL选项变红，说明选择器生效。
换用等效选择器测试：试试输入.super-attribute-select option:nth-child(2)，因为这里所有子元素都是<option>，两个选择器效果完全一致，看工具是否会保留伪类部分。
升级Firefox版本：如果是旧版本DevTools的bug，升级到最新版Firefox通常能解决这类问题。