css - 重复的伪类选择器

我在Bootstrap CSS文件中注意到:

 input:focus:invalid:focus,
 textarea:focus:invalid:focus,
 select:focus:invalid:focus {
   border-color: #e9322d;
   -webkit-box-shadow: 0 0 6px #f8b9b7;
      -moz-box-shadow: 0 0 6px #f8b9b7;
           box-shadow: 0 0 6px #f8b9b7;
 s}

似乎:focus为输入，文本区域和选择指定了两次；这有特定功能吗？

最佳答案

这会增加css选择器的specificity。

这是css规范中的相关报价:



因此，在这种特殊情况下，input:focus:invalid:focus将优先于input:focus:invalid。

这是simpler example，它说明css特异性随着重复出现而增加:

css

span.color.color {
    color: green;
}

span.color {
    color: yellow;
}

html

<span class="color">This will be green.</span>

关于css - 重复的伪类选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18475265/