CSS 특이성

이 마크 업 가정 :CSS 특이성

<html class="fr"> 
<head> 
</head> 
<body> 
<div class="class1"> 
</div> 
</body> 
</html>

것이이 이상

.fr .class1 { 
    background-color: blue; 
}

보다 우선 :

.class1 { 
    background-color: red; 
};

편집 : 궁금 사람으로

는, 예, 시도했습니다. :) 전체 프로를 설명하지 않았습니다. 여기에서 흠집을 낸 다음이 게시물 이후에 문제를 발견했습니다.

기본적으로, 나는이 같은 스타일 시트의 스타일을했다 : 기술적으로 .fr .class1이 .class1 이상 precendence을 소요하는 동안

.fr .class1 { 
    font-size: 12px; 
} 

.class1 { 
    font-size: 12px; 
    line-height: 18px; 
    height: 80px; 
}

을,이 요소가의 '.fr .class1와의 스타일'의 .class1을 모두 대체 의미하지 않는다 스타일. 대신 스타일은 .fr .class1이고 그 다음은 .class1입니다. 이것은 "명백한"것이지만 이것이 내가 어려움에 처한 이유입니다.

내 목표는 .fr .class1의 우선 순위를 .class1 이상으로 사용하여 스타일을 제거하는 것이 었습니다. 이를 위해, 나는 0 또는 중립 값으로 값을 설정해야합니다 깨달았다. 그것은 .class1에 계단식과 이러한 스타일을 채울 것입니다,

.fr .class1 { 
    font-size: 12px; 
    line-height: 0; 
    height: auto; 
}

그렇지 않으면

예)

2011-08-28 djreed

과 동일? 먼저 시도하는 것이 가장 좋습니다 ...! –

@ Cubed : 그러나 브라우저 버그의 역사를 감안할 때 표준을 확인한 다음 관심있는 브라우저가 원하는 방식으로 표준을 따르는 지 확인하는 것이 가장 좋습니다. –

편집에 원래 게시물의 주석을 추가했습니다. – djreed

예 .fr .class1은 두 개의 클래스 이름을 참조하고 .class1은 하나만 참조하므로 첫 번째 클래스가 더 구체적입니다. CSS 표준의 규칙은 here입니다.

2011-08-28 03:13:21 Douglas

예 첫 번째 예의 경우 두 개의 클래스 이름이 하나의과 비교 되었기 때문입니다.

예 :이 CSS 특이성 계산기를 사용 http://jsfiddle.net/jasongennaro/yQvAF/

시도 :

CSS 개별적으로 각 속성에 값을 적용 편집에 대응 http://www.suzyit.com/tools/specificity.php

2011-08-28 03:15:00

. 블록 그룹은 중요하지 않습니다. 그래서

.fr .class1 { 
    font-size: 12px; 
} 

.class1 { 
    font-size: 12px; 
    line-height: 18px; 
    height: 80px; 
}

는 .fr .class1 혼자 .class1보다 더 구체적이기 때문에, 이는

.fr .class1 { 
    font-size: 12px; 
} 
.class1 { 
    font-size: 12px; 
} 
.class1 { 
    line-height: 18px; 
} 
.class1 { 
    height: 80px; 
}

같은 당신이 시도

.fr .class1 { 
    font-size: 12px; 
} 
.class1 { 
    line-height: 18px; 
} 
.class1 { 
    height: 80px; 
}

2011-08-28 07:01:57 user123444555621

정확히 내가 결국 발견 한 것. 이것을 아주 명확하게 요약 해 주셔서 감사합니다! – djreed

답변