Css 重复伪类选择器

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

---

看起来：为input、textarea和select指定了两次焦点；这是否具有特定功能？

这会增加css选择器的可用性

以下是css规范中的相关引用：

注：允许重复出现同一个简单选择器，但会增加特异性

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

下面是一个例子，表明css特异性随着重复发生而增加：

css

html

---

在这种情况下，是否会应用输入：focus:invalid？给定示例上面的块是：input:focus:invalid，textarea:focus:invalid，select:focus:invalid{color:b94a48；border color:ee5f5b；}我不想说它永远不会被应用，因为，TBH，我无法解释在引导中的用法，除非它是为了注释掉上面的块，同时将其保留在源代码中。。。另外，如果我没有弄错的话，这是来自BS2.3.2的，所以今天很难问为什么在当时添加了它。。。

span.color.color {
    color: green;
}

span.color {
    color: yellow;
}

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