CSS id-element가 하위 정의를 덮어 씁니다.

Question

#top a { 
    color: #C6D6CA; 
    margin: 0 25px; 
    text-decoration: none; 
} 

.mainlink a { 
    display: block; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

.mainlink div는 #top 어딘가에 있습니다. 왜 마진의 #top (부모) 정의가 .mainlink a에 설정된 것을 덮어 씁니 까? 그 행동을 바꾸는 방법?

Answer 1

당신은 당신의 규칙을 변경하여 문제를 해결할 수 있습니다 :

#top a {} 
#top .mainlink a {} 

Answer 2

이것을 선택기 지정이라고합니다. 또한 : http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 3

CSS는 "계단식"이므로 요소의 자식에 색상이 적용됩니다. 자식의 색상을 지정해야하며 속성 선언의 끝에 "! important"를 추가해야 할 수도 있습니다.

Answer 4

스타일 시트가 계단식으로 배열 될 때 명명 된 ID의 우선 순위가 클래스보다 높습니다.

http://www.w3.org/TR/CSS2/cascade.html

당신은 대체를 강제로 margin: 0 !important를 사용할 수 있습니다.

Answer 5

#top a 선택자는 .mainlink a보다 specificity입니다. ID 선택기 크게은 선택기의 특이성을 높입니다.

A. 바꾸기 :

각 ID가 (100)의 각 클래스의 계수로 선택의 특이성을 증가하는 경우를 되 중, I는 것 그게 10

배 특이성을 증가 클래스가있는 ID 또는
B. 두 번째 선택기에 ID를 추가하십시오.