如何在两个相同的<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.