6

我在 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 为 input、textarea 和 select 指定了两次;这有特定的功能吗?

4

1 回答 1

6

这增加了 css 选择器的特异性

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

注意:允许重复出现相同的简单选择器并且确实增加了特异性。

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

这是一个更简单的例子,展示了css重复出现的特异性增加:

css

span.color.color {
    color: green;
}

span.color {
    color: yellow;
}

html

<span class="color">This will be green.</span>
于 2013-08-27T21:03:18.387 回答