Question

我试图获得：第一个类型适用于 HTML元素，但它无法正常工作。

可能有很多（随机数和位置，但在p标签内）元素，但我希望第一个元素的文本颜色与其他元素不同。

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

＆＃13;

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

＆＃13;

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

＆＃13;

JS fiddle

有什么想法吗？

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

Answer 1

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

不幸的是，在这种情况下，你可能会陷入困境。由于第一个元素可能不一定出现在标记中显示的第一个元素中，因此您无法使用.yolo p:first-of-type strong之类的内容来定位第一个元素。 {1}}。也没有一种方法可以使用CSS来仅仅定位这种结构中的第一个元素，因为现有的结构伪类只匹配其兄弟姐妹中的第n个元素，并且there is no parent selector因此您无法编写选择器查找＆＃34;包含元素＆＃34;的第一个元素。

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

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

然后定位这个课程。

Answer 2

来自css-tricks：

CSS中的第一个类型选择器允许您定位其容器中元素的第一个出现位置。它在CSS Selectors Level 3规范中定义为“结构伪类”，这意味着它用于根据内容与父级和兄弟级内容的关系来设置内容的样式。

这意味着这将有效：

<div class="yolo">
    <p><strong>Strong 1</strong>
    <br>
    <strong>Strong 2</strong></p>
</div>

但这不会：

<div class="yolo">
    <p><strong>Strong 1</strong></p>
    <p><strong>Strong 2</strong></p>
</div>

因为在第二个示例中，中的每一个都是其容器中的第一个。但是在第一个示例中，两个标记都在同一个容器中，因此Strong 1变为蓝色，是段落中的第一个，而Strong 2变为黄色，而不是第一段。

如何在P标签中将第一个强元素着色为一种颜色，其余颜色为另一种颜色？

2 个答案: