2010-04-06 3 views
2

나는 이것이 당신을 위해 상당히 간단하다고 생각하지만 나는 그 주위에 내 머리를 감쌀 수 없다. 나는 중요한 부분을 찢어 버렸다. 나는 내용을 #content 안에 넣었으므로 바꿀 수 없다. 중요한 태그를 사용하고 싶지 않다. css는 내 css 파일에있는 순서대로 표시됩니다.기본적인 CSS 문제

"#content h2 a, #content h2 a : visited"는 .post-header h2 a를 어떻게 대체합니까?

<html> 
    <head> 
    ..... 
    </head> 
    <div id="content"> 
    ..... 
     <div class="post-header"> 
      <a href="#">my text</a> 
     </div> 
    </div> 
</html> 


#content h2 a, #content h2 a:visited { 
    font-family:"arial black","lucida console",sans-serif; 
} 

.post-header h2 a { 
    font-family:Arial,sans-serif; 
} 

/조엘

+4

id-selector가 class-selector보다 좀 더 구체적이기 때문에 무시됩니다. –

답변

6

먼저 브라우저는 cascading order을 확인합니다. 선언은 모두 동일한 매체, 중요성 및 원산지에 대한 것이므로 규칙은 특이성에 따라 정렬됩니다.

다음, 브라우저는 the selector's specificity을 계산하고 Id 선택기 클래스 선택기보다 우선 순위가있다 (여기에 질문의 중요한 부분) :

다음과 같이 선택의 특이성은 을 계산

:

  • 선언이 from 일 경우 선택자가있는 규칙이 아닌 'style'속성 인 경우 0 그렇지 않으면 (= a) (HTML에서는 요소의 "style"속성 값이 스타일 시트 규칙입니다. 이러한 규칙에는 no셀렉터, 따라서 a = 1, b = 0, c = 0 및 d = 0)
  • 셀렉터에서 ID 속성 수를 계산하십시오 (= b)
  • 다른 속성 및 의사 클래스 셀렉터 (= 온도)에서
  • 은 특이성이 선택기의 형태에만 기초

셀렉터 (= d)의 요소 이름 및 유사 소자의 수를 계산. 특히 속성이 정의 된 경우에도 "[id = p33]"형식의 선택자는 이고 속성 선택기 (a = 0, b = 0, c = 1, d = 0)로 계산됩니다. 소스 문서의 DTD 의 "ID"로

a-b-c-d 네 개의 숫자를 연결하면 (큰 수를 가진 숫자 시스템에서) 특이성이 부여됩니다.

+0

이 정보를 저장했습니다 ... 감사합니다. –

0

다음을 사용할 수 있습니다

.post-header h2 a { 
    font-family:Arial,sans-serif!important; 
} 

는 CSS 규칙에 추가 우선 순위를 추가하고 어떤 다른 사람을 무시하도록하려면.

+0

당신의 모든 빠른 답변을 주셔서 감사합니다. –

+0

'! important'는 슬레지 해머입니다. 일반적으로 피해야합니다. – Quentin

0

ID를 기반으로 한 선택자는 클래스를 기반으로 한 선택자보다 우선합니다.

클래스 기반 스타일로 ID 선택기를 무시하려면 요소 스타일에! important를 추가하십시오.

.post-header h2 a { 
    font-family:Arial,sans-serif !important; 
} 

! important는 IE6에서 작동하지 않습니다.

5

id는 클래스보다 구체적입니다. 귀하의 경우에는 클래스 앞에 ID를 추가 할 수 있습니다.

#content .post-header h2 a { 
    font-family:Arial,sans-serif; 
}