단순한 CSS 상속으로 어려움

Question

꽤 일반적인 CSS 상속 상황 인 것처럼 보였습니다.하지만 내가 생각한대로 작동하지 않는 이유를 이해할 수 없습니다. 여기

은 상속 그래서 내가 "#mainContent 피"의 스타일을 무시할 것 ".homeBox P는"내 스타일을 기대 크롬 웹 디버거

에서 본 모습입니다. 그리고 아직 ...

#mainContent의 페이지 스타일

는 .homeBox 피보다 우선합니다. 뭐라 구요?

Answer 1

ID 스타일은 클래스 스타일을 무시합니다.

일관성을 위해 가능한 경우 ID 스타일을 사용하지 마십시오.

가끔 ASP.NET을 사용하는 것처럼 ID를 다시 렌더링 할 수있는 서버 측 스크립팅으로 작업을 시작할 때 이들을 사용하지 않는 것이 유용합니다.

Answer 2

순서는 먼저 특수성에 의해 결정되며 ID는 클래스보다 더 구체적입니다.

Answer 3

#mainContent은 다른 선택자보다 더 큰 특이성을 가지고 있기 때문에 그 요소에 대한 가장 구체적인 설명으로 판단되며 클래스 위에 선택됩니다. 선택 지배력에 대한

규칙은 W3의 문서에서 설명, 매우 복잡하다 : 이전 답변에서 언급 한 바와 같이 http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

특이도, 맞습니다. 가장 간단한 해결 방법은 ID를 사용하지 않는 것입니다. 당신이있는 경우 예를 들어, 중첩 된 요소에 대한 CSS, 기록 할 때, 계정으로 가져가 :가 적은 특정을 무시 있도록

#mainContent .homeBox p{font-size: 15px;}