CSS 우선 순위 및 특정 요소 타겟팅

Question

제 질문은 꽤 어려운 일입니다. 웬일인지 나는 오늘 그 머리를 감쌀 수 없다.

나는 그렇게

<div class="wrapper"> 
    <ul> 
     <li class="menu-item"><a href="#">Menu Item</a> 
      <div class="inner"> 
       <a href="#">Login</a> 
      </div> 
     </li> 
    </ul> 
</div> 

나는 다음과 같은 CSS 선택기를 사용하여 로그인 링크를 목표로 노력하고 같은 구조로 메뉴를 만들고있어 : 선택기가 작동

.inner a{} 

, 그러나 다음 셀렉터가 CSS의 출현 빈도를 취하고 위의 셀렉터를 오버라이드합니다.

나는 완전히 당황 스럽다. 두 번째 선택기가 첫 번째 스타일보다 스타일 우선 설정을 사용하는 이유는 무엇입니까? 위의 "a"요소를 어떻게 목표로 삼으시겠습니까?

Answer 1

왜 두 번째 선택이 걸릴 것이다 스타일 설정 :

나는 내가이 전에 대답 거라고 알고 있었다?

두 번째 선택기가 첫 번째 선택기보다 많으므로 specific입니다. 첫 번째는 하나의 클래스와 하나의 유형 선택기를 포함하는 반면 두 번째는 하나의 클래스와 두 개의 유형 선택자를 포함합니다.

는

• 인라인 스타일이 가장 높은 특이성을 가지고 대신 할 수있는 모든 (0,0,0,0)에서 시작, 네 개의 숫자의 consiting로 선택의 생각, 특이도를 계산하려면 첫 번째 숫자는 (1,0,0,0)입니다. 제 개수 (0,0,1,0)
• 으로서 제 2 번호 (0,1,0,0)
• 클래스, pseudo-classes (other than :not())과 같은 카운트 attribute selectors
• ID의 개수 Type selectors 및 유사 요소 - 예 div {} 또는 제 (0,0,0,1)도

같은 ::after{} 횟수 :

• universal selector*는 선택기 특이성에 영향을 미치지 않는다.
• Combinators은 +, ~ 및 >도 특이성에 영향을 미치지 않는다.
• !important 거의 항상 우선합니다. 선택자 특이성과 관련된 네 개의 숫자에는 영향을 미치지 않지만. 다른 !important 규칙 만 이전에 정의 된 규칙을 무시할 수 있습니다. The exception is when the previously defined !important rule has a more specific selector. 여기에는 특이성의 일반적인 규칙 (위에서 설명한)이 적용됩니다.

Answer 2

li.menu a에는 요소를 idendtify하기위한 세 부분, 즉 부모 요소 (li), 부모 클래스 (menu-item) 및 요소 (a)가 포함되어 있기 때문입니다. 원하는 셀렉터에는 2 개만 있으므로 다음과 같이 수정할 수 있습니다.

li.inner a{} 

그리고 제대로 작동합니다.

편집 : 첫 번째 이상 Why does my HTML not use the last style defined in the CSS?

Answer 3

CSS 셀렉터는 그들에 부착 된 "중량"시스템을

• 요소 의사 요소 : d = 1 - (0,0,0,1)
• 클래스 의사 클래스 속성 : c = 1 - (0,0,1,0)
• Id : b = 1 - (0,1,0,0)
• 인라인 스타일 : a = 1 - (1,0,0, 0)

그래서 y 첫 번째 선택기의 점수는 (0,0,1,1) 이며 두 번째 선택기의 점수는 (0,0,1,2)보다 높고 따라서 우선 순위가 높습니다.

Answer 4

CSS 우선 순위는 가장 높은 특이성을 가지는 DOM 객체

그래서 무엇이 특이성을 얻습니까? 당신의 예에서

Element Selector -- 1 
Class Selector -- 10 
ID Selector -- 100 
Inline Selector -- 1000 

: .inner 11 점

것

a(1) + .inner(10) = 11 

li.menu 항목 A는 12 점

li(1) + .menu-item(10) + a(1) = 12 

그래서 그 두 번째는 무엇이 될 것입니다 이유입니다 표시됩니다. 올바른 스타일을 표시하려면 더 구체적으로 지정하십시오 (예 : .menu-item .inner a

) 여기에 대한 유용한 정보가 있습니다. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 5

당신은 다음과 같이 각 요소 내부의 앵커에 CSS를 적용 할 수 있습니다

li.menu-item > a{} 
.inner > a 

이런 식으로 수행의 규칙 "li.menu 항목이"를 방해하지 않을 것이다 다른 앵커.