CSS 중첩 문제 - 컨테이너 정보 읽기

Question

이 문제는 CSS로 작업 할 때 수시로 발생합니다. 여기에 제가 직면 한 문제가 있습니다.

내 현재 코드는 다음과 같습니다

.entry p {margin: 10px} 
blockquote {stuff} 
blockquote p {margin: 0px} 

내가 인용구 내부의 단락이 '인용구 페이지'에서 읽을 것이라고 생각하지만, 대신에 걸립니다 :

내 CSS에서

<div class="entry"> 
    <div> 
    <blockquote><p>quoted text</p></blockquote> 
    </div> 
</div> 

, 내가 가진 마진 : '엔트리 p'에서 10px.

'blockquote p'대신 'entry p'에서 읽는 이유는 무엇입니까?

Answer 1

일반적으로 CSS에서 마지막 선언문이이기는 반면, 이는 they both share the same specificity weight 인 경우에만 해당됩니다. 그러나 2 선택기가 동일한 특이성이 아닌 경우 코드의 뒷부분에 있더라도 하위 선택기는 으로 다시 정의됩니다. 클래스 명 선택은 태그 이름 선택보다 더 높은 특이 값을 가지고 있기 때문에

는 두 번째 선언은 무시되고있다.

.entry blockquote p {margin: 0px} 

또는 지칠대로 지친 !important 사용 :

가 나중에 하나를 더 높은 특이성을 제공하기 위해, 당신은 그것을 더 자격을해야하는 경우에만 첫 번째

blockquote p { margin: 0px !important } 

사용에게 두 번째 방법을 하나는 실패합니다 (귀하의 예에서는 첫 번째 것이 좋을 것입니다).

Answer 2

이것은 specificity과 관련이 있습니다. .entry p가 그것을 변경 blockquote p

보다 높은 말을하는 것입니다

제 (다른 솔루션이 있지만) 당신은 .entry을위한 클래스를 지정하고

.entry blockquote p 

Answer 3

그것을 해결할 다음되는 구체적이지 - 전 세계가 아닙니다.

는 시도 유무 :

.entry blockquote p 
{ 
    margin: 0px; 
} 

Answer 4

그것은 오히려 선택의 특이성, CSS에 대한 문서 순서의 문제가 아니다. 자세한 내용은 Calculating a selector's specificity을 참조하십시오.

Answer 5

클래스를 선언하면 태그에 대해 정의 된 CSS보다 첫 번째 기본 설정이 적용됩니다.