繰り返し擬似クラスセレクタ

Question

私は、ブートストラップ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} 

表示されます。フォーカスが入力、テキストエリアのために2回指定、および選択されます。これは特定の機能を持っていますか？

Answer 1

これにより、CSSセレクタのspecificityが増加します。

はここcssスペックで関連の引用です：

注：同じ単純セレクタの繰り返し発生が許可されていると特異性を高めるん。

したがって、この特定のケースでは、input:focus:invalid:focusがinput:focus:invalidよりも優先されます。入力、この場合

CSS

span.color.color { 
    color: green; 
} 

span.color { 
    color: yellow; 
} 

HTML

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