Question

我在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}

看起来：对输入，textarea和select指定了两次焦点;这有什么特别的功能吗？

Answer 1

这会增加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>

重复的伪类选择器

1 个答案: