CSS 特异性在 Chrome 中无法按预期工作

Question

在阅读6.4.3 Calculating a selector's specificity之后，我预期会发生的事情和实际发生的事情似乎是矛盾的。很明显，我理解错了。如果有人可以简要解释一下为什么我在这 1 点上错了以及如何解决它，那就太好了。

/* opt.css */
#opt input[type="text"] { width: 200px; }
#tok { width: 300px; }

/* opt.html */
<div id="opt"><input id="tok" type="text" /></div>

我期待，因为#tok 比#opt input[type="text"]更具体，输入框的宽度将是 300 像素，但它是 200 像素。

#opt input[type="text"]  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
#tok                     /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

我可以通过 Chrome Inspector 看到 200px 获得了优先级，而 300 被划掉了，所以我对特异性的理解是错误的。我只是不明白我怎么弄错了。 b 不会覆盖c 和d？

还有如何解决这个问题。

感谢您的帮助。

Answer 1

#tok 不如#opt input[type="text"] 具体：

#tok                     /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
#opt input[type="text"]  /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */

b = id 的数量
c = 属性和伪类的数量
d = 元素名称和伪元素的数量