CSS特性在Chrome中无法正常工作

Question

在阅读 6.4.3 Calculating a selector's specificity 之后，我预期会发生什么以及实际发生的事情似乎相互矛盾。很明显，我理解错了。如果有人能够在这一点上给我一个简短的解释，说明为什么我错了，以及如何解决这个问题，那就太棒了。

/* 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"]，输入框的宽度将是300px，但是200px。

#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 = ids数量
c =属性和伪类的数量
d =元素名称和伪元素的数量