Как разместить разные стили на двух одинаковых элементах <cite>?

Question

У меня есть

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

есть ли способ в css сказать, что первый цитат будет выделен жирным шрифтом, а второй курсивом, без редактирования вышеуказанного кода ?

Answer 1

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

Но учтите, что это не сработает в IE6. Возможно, вы захотите использовать jquery для применения правил css3 в ie6. Существует также скрипт с именем IE7 , но он немного медленный.

Answer 2

С помощью CSS3 вы сможете выполнить это с помощью следующего стиля:

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

В настоящее время CSS3 довольно плохо поддерживается, поэтому проверьте браузеры, которые вы решили поддерживать.

Answer 3

Есть способы сделать это с помощью CSS, но он не будет совместим с IE6. Пока вы в порядке с этим, вы можете сделать это:

p cite {
    font-weight: bold; 
}

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

Причина, по которой это работает, заключается в том, что «+» выбирает родного брата для любого данного места. Поскольку родственные отношения в DOM только продвигаются, вы выбираете только второй (или nth, где n> 1) тег цитирования.

К сожалению + не работает с IE6.

Answer 4

Вы можете использовать псевдоселектор: first-child, хотя он не подходит для разных браузеров.

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

Answer 5

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