如何在两个相同的<cite>元素上放置不同的样式?

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

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

目前对CSS3的支持非常差,因此请检查您决定支持的浏览器。

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

但要注意,在IE6中不起作用。您可能希望使用jquery在IE6中应用CSS3规则。还有一个脚本叫做 IE7 但是有点慢。

您可以使用:第一个子伪选择器,尽管它不支持跨浏览器。

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

有很多方法可以用CSS来实现,但是它不能与IE6兼容。只要你同意,你可以这样做:

p cite {
    font-weight: bold; 
}

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

之所以这样做是因为“+”选择了任何给定引用的同级。因为兄弟关系只在DOM中前进,所以您只能选择第二个(或第n个,其中n>1)引用标记。

不幸的是+不适用于IE6。

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