css - 如何为 P 标记中的第一个强元素着色一种颜色，其余为另一种颜色？

Question

我正在尝试让 :first-of-type 为 <strong> 工作HTML 元素，但它不起作用。

可以有很多(随机数和位置，但在 p 标签内)<strong>元素，但我希望第一个元素的文本颜色与其余元素不同。

在这里，我希望 Hello 1 是蓝色的，Hello 2 + Hello 3 是黄色的。但它们都是蓝色的。

.yolo p strong { color:yellow; }
.yolo p strong:first-of-type { color:blue; }

<div class="yolo">
    <p>bla bla</p>
    <p><strong>Hello 1</strong></p>
    <p>bla bla</p>
    <p><strong>Hello 2</strong></p>
    <p>bla bla</p>
    <p>bla bla</p>
    <p><strong>Hello 3</strong></p>
</div>

JS fiddle

有什么想法吗？

解决方案不必包含 :first-of-type只要 HTML 保持不变。

Answer 1

如前所述，每个 <strong>元素是其父元素中的第一个元素类型 <p> ，因此两个元素都匹配 :first-of-type伪类。

不幸的是，在这种情况下，您可能会被卡住。自第一<strong>元素不一定出现在第一个 <p>标记中显示的元素，您将无法使用类似 .yolo p:first-of-type strong 的内容瞄准第一个 <strong> .也没有办法使用 CSS 仅针对此类结构中的第一个元素，因为现有的结构伪类仅匹配其兄弟元素中的第 n 个元素，并且 there is no parent selector所以你不能编写一个选择器来查找“第一个包含 <p> 元素的 <strong> 元素”。

由于您的标记是由 CMS 生成的，因此您必须要么

• 告诉 CMS 将类名应用于包含 <strong> 的第一段元素或第一个 <strong>元素，或
• 如果无法修改 CMS 的行为，则使用 JavaScript 应用类名

然后定位这个类。