2013-08-27 10 views
6

의사 클래스 선택기 :반복 내가 부트 스트랩 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} 

이 나타납니다 포커스를 입력, 텍스트 영역에 대해 두 번 지정, 선택되고; 이것이 특별한 기능을 가지고 있습니까?

답변

6

이 경우 CSS 선택기의 specificity이 증가합니다.

는 여기에 css 사양의 관련 인용입니다 :

참고 : 같은 단순한 선택의 반복 발생이 허용와 특이도를 증가 않습니다.

따라서이 특정 경우에는 input:focus:invalid:focusinput:focus:invalid보다 우선합니다. 여기

은 반복 OCCURENCES와 css 특이성 증가 보여주는 simpler example이다

CSS를

span.color.color { 
    color: green; 
} 

span.color { 
    color: yellow; 
} 

HTML 이때

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

,하고자 입력 : 포커스 : 무효가 적용될 수 있습니까? 주어진 예제 위의 블록은 다음과 같습니다 : 'input : 포커스 : 유효하지 않음, 텍스트 영역 : 포커스 : 유효하지 않음, select : focus : invalid { color : # b94a48; border-color : # ee5f5b; }' – cardinal19821

+0

나는 그것을 적용하지 않을 것이라고 말하고 싶지 않습니다. 왜냐하면 TBH, 소스에 그것을 유지하면서 위의 블록을 주석 처리하지 않는 한 부트 스트랩에서 사용법을 설명 할 수 없기 때문입니다 ... 게다가 이것이 BS2.3.2에서 온 것이라고 착각하지 않는다면, 왜 이것이 오늘날 왜 추가되었는지를 묻는 것이 어려울 것입니다 ... – edsioufi