두 개의 동일한 <cite> 요소에 서로 다른 스타일을 적용하는 방법은 무엇입니까?

Question

나는이

<p> 
    <cite>One</cite><cite>Two</cite> 
</p> 

는 위의 코드를 편집하지 않고, 대담하고 두 번째 이탤릭체로려고하고 먼저 인용라고하는 CSS의 방법이 있나요?

Answer 1

, 당신은 다음과 같은 스타일이 작업을 수행 할 수 있어야합니다.

Answer 2

크로스 - 브라우저 친화적이지는 않지만 : first-child 의사 선택자를 사용할 수 있습니다.

p cite:first-child { font-weight: bold; font-style: normal; } 
cite { font-style: italics; } 

Answer 3

p > cite { font-weight: bold } 
p > cite + cite { font-style: italic } 

하지만 IE6에서 작동하지 않습니다 조심. jquery를 사용하여 ie6에서 css3 규칙을 적용 할 수 있습니다. IE7이라는 스크립트도 있지만 약간 느립니다.

cite:nth-child(1) { font-weight: bold; } 
cite:nth-child(2) { font-style: italic; } 

CSS3 매우 저조한 순간에 지원됩니다, 그래서 당신이 지원하기로 결정 브라우저를 확인 : CSS3와

Answer 4

CSS로 할 수있는 방법이 있지만 IE6과 호환되지는 않습니다. 만큼 그래도 괜찮다로, 당신이 할 수 있습니다 : '+'주어진 어떤 인용의 형제를 선택하기 때문에이 작품

p cite { 
    font-weight: bold; 
} 

p cite + cite { 
    font-style: italic; 
    font-weight: normal; 
} 

이유입니다. 형제 관계는 DOM에서만 진행되므로 두 번째 (또는 n 번째, n> 1) 인용 태그 만 선택합니다.

불행히도 + IE6에서는 작동하지 않습니다.

Answer 5

p cite:first-child { 
    font-weight: bold; 
} 
p cite:last-child { 
    font-style: italic; 
}