Question

我正在为使用相当深入的CMS的网站进行重新设计。编辑们很长一段时间只使用粗体标签作为标题，但现在我们想要在文章字体中添加粗体文本，并使用h3标签在另一种字体中添加标题。但作为一种传统的解决方法，新文章中的任何粗体文本都将以标题字体显示。

旧标题将始终在 p 标记中使用强标记进行格式化。同时，粗体字体在文本段落中自然是强标记。内容包含在 div 中，其ID为 bodycopy 。

所以，举个例子：

<div id="bodycopy">
    <p><strong>Old style headline</strong></p>
    <p>Here is paragraph text that can contain <strong>bolded</strong> text.</p>
</div>

我需要一种方法来为文章字体添加CSS 强标记样式，并将 p 和强标记的确切组合作为标题。我尝试过的所有东西，无论是CSS还是Javascript / jQuery，都没有用过。

<style type="text/css">
    #bodycopy p strong {font:bold 11pt Arial;}
    #bodycopy p+strong {font:bold 20pt "Times New Roman";} // Doesn't work
</style>

任何帮助都会非常感激。

修改：这些标题可以出现在文字的任何位置，而不仅仅是第一行或第一行。

Answer 1

试试这个：

#bodycopy p:first-child strong {font:bold 20pt "Times New Roman";} 
#bodycopy p strong {font:bold 11pt Arial;}

Answer 2

这是一个棘手的问题，因为标记在每种情况下都是的第一个孩子标签

如果您确定标题模式...始终是包含块的第一个子项，您可以尝试：

#bodycopy p strong {
    font: bold 11pt Arial;
}
#bodycopy p:first-child strong {
    font: bold 20pt "Times New Roman";
}

这将照顾您的遗留页面。

演示：http://jsfiddle.net/audetwebdesign/BvB9G/

找到两个相邻且触摸的标签，并对其进行CSS更改

2 个答案: