2つの同一の<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で動作しないことに注意してください。あなたはie6でcss3ルールを適用するためにjqueryを使いたいかもしれません。 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内でのみ進むので、2番目（またはn番目のn> 1）のciteタグのみを選択します。

残念ながら+ IE6では動作しません。

Answer 5

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