特定类的第一个子元素CSS样式

Question

我有以下的HTML代码：

<span class="ui-icon ui-icon-triangle-1-s"></span>
<span class="route-line">4</span>
<span class="route-line">33</span>

我想在具有 class="route-line" 的 第一个 span 上添加一些样式。这是否可以使用CSS实现？类似于 nth-of-type 的东西；如果存在的话，它将被称为 nth-of-type-with-class。

谢谢！

- linkyndy

Answer 1

在这种情况下，您可以使用兄弟选择器。像这样：

.ui-icon + .route-line{
    color: red;
}

它只会为类名为ui-icon的元素后面的span添加样式。

- skip405

---

我可能会坚持使用这个解决方案，直到找到更好的。谢谢！ - linkyndy

Answer 2

首先翻译带有.route-line类的第一个元素，然后翻译任何没有.route-line类的其他元素。

*:not(.route-line) + span.route-line
{
    background-color:yellow;
}

- Leo

---

如果您注意到任何速度慢的情况，可以将 * 替换为 span。 - Leo

没错。这与以前接受的答案类似，但我相信这个更接近我所需要的。谢谢！ - linkyndy

Answer 3

为什么不给你想要样式化的元素应用另一个类。

<span class="ui-icon ui-icon-triangle-1-s"></span>
<span class="route-line custom-route-line">4</span>
<span class="route-line">33</span>

而 CSS 的样式应该是这样的

.custom-route-line{/*your styling goes here*/}

请注意，这个元素将同时应用两种样式类（route-line和custom-route-line）。 在这里查看

- menislici

---

我知道，但我想尽可能保持HTML的清洁。 - linkyndy

Answer 4

你所寻找的是 span.route-line:first-of-type，但它的支持性很差。

- pozs