如何在两个相同的<cite>元素上添加不同的样式？</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在ie6中应用css3规则。还有一个名为IE7的脚本，但它有点慢。

Answer 2

使用CSS3，您应该能够使用以下样式完成此操作：

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

CSS3目前支持得很差，因此请检查您决定支持的浏览器。

Answer 3

您可以使用：first-child伪选择器，尽管它不是跨浏览器友好的。

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

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;
}