Powtarzające Pseudo-klasa Selektory

Question

zauważyłem w pliku CSS bootstrap:

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} 

Wydaje się, że: nacisk zostanie określony dwukrotnie do wejścia, textarea i wybierz; czy ma to określoną funkcję?

Answer 1

Powoduje zwiększenie wartości specificity selektora CSS.

Oto odpowiedni cytat w css specyfikacji:

Uwaga: powtórzeń tego samego selektora prostego są dozwolone i zwiększają specyficzność.

Tak więc, w tym szczególnym przypadku, input:focus:invalid:focus będzie mieć pierwszeństwo przed input:focus:invalid.

Oto simpler example wykazując wzrost css specyfiki z powtarzających się wystąpień:

css

span.color.color { 
    color: green; 
} 

span.color { 
    color: yellow; 
} 

html

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