有没有办法了解为什么 Firefox 选择 CSS 选择器而不是其他选择器？答案

【问题标题】：Is there a way to see why Firefox chose a CSS selector over others?有没有办法了解为什么 Firefox 选择 CSS 选择器而不是其他选择器？
【发布时间】：2015-08-10 07:15:05
【问题描述】：

我在文档检查器窗口中，并选择了元素并检查了侧面的“计算”选项卡。但这仅向我展示了该属性可用的值以及选择了哪个值，而不是 为什么选择。

基本上，我正在尝试使用 Stylish 脚本设置属性 (width)，但该站点自己的设置一直覆盖我的设置，尽管我相信我的设置具有更高的特异性 - 选择的选择器是 .class1，而我的选择器是tr td.class1.class2.class3[style]（我已经确认它适用于该元素，因为它确实出现在“计算”窗格中，尽管被划掉了）。该网站的 CSS 表和我的 Stylish 脚本都在此属性上使用了 !important 后缀。所以，我想知道为什么该网站的属性设置被选择而不是我的。

【问题讨论】：

@caeth — 不正确。特异性仍将正常适用。 jsbin.com/jiqagulale/1/edit?css,output
我很确定 Firefox 没有这样的工具。它被划掉的最可能原因是名称或给定的有效名称无效。
嗯，[style] 你说？ style 属性本身非常具体；你确定 td 没有从那里得到它的样式吗？
@Quentin 给定的值 (12em) 适用于我添加到同一定义中的其他选择器。 “名称”是指属性名称吗？由于选择器出现在 width 下的 Computed 窗格中，显然情况并非如此。
@MrLister 呵呵，实际上，选择的选择器来自一个包含的 .css 文件，标签本身的 style 属性只是空的（但无论出于何种原因都存在）。这是<td class="class1 class2 class3 " style="">。我在选择器中包含该位只是为了进一步提高特异性。

标签： css firefox inspector stylish

【解决方案1】：

这是与浏览器相关的事情。如果您说 style=""，使用空字符串，可以问“我真的设置了样式，还是没有设置？”。 W3C 规范没有阐明这一点。所以我在 Firefox 和 IE11 中尝试了以下代码：

<div style="">
xx
</div>

和 CSS：

div[style] { border: 1px solid black; }

Firefox 显然认为这是在设置内联样式，因此会识别选择器并显示指定的边框，而 IE11 则认为它不是内联样式且不显示边框。

【讨论】：

这很有趣。如果您有<td nowrap> 或<td nowrap="">，IE 可以使用td[nowrap]。我不知道。
这可能归结为 W3C 规范未定义的行为，因此浏览器创建者可以只做他们当时认为正确的事情——我们甚至可能会遇到这样的情况：一位设计师或程序员（编写 HTML 样式属性）可能会做出与对面正在编写 nowrap 的人不同的决定！
为了避免依赖未指定的行为，将某些内容放在引号中会更安全，即使它对 CSS 毫无意义。当我在上面的代码 sn-p 中添加 style="abc" 时，IE 的行为与 Firefox 相同，因为现在它已被规范所涵盖。