在阅读了6.4.3计算选择器的特异性之后，我期望发生的事情和实际发生的事情似乎矛盾。很明显，我理解错了。如果有人可以简要地解释一下我为什么在这一点上错了，以及我如何解决这一点，那将很棒。
/* 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得到优先级，而300px被剔除，所以我对特异性的理解是错误的。我只是不明白我怎么弄错了。难道b不能覆盖c和d？
还有如何解决这个问题。
感谢您的任何帮助。
#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数量=元素名称和伪元素的数量
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句