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>

我想在第一个 span上添加class="route-line"一些风格。 CSS有可能吗？它类似于nth-of-type;如果它已经存在，它将被称为nth-of-type-with-class。

谢谢！

Answer 1

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

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

它将仅使用类span对元素后面的ui-icon进行样式设置。

Answer 2

对于没有类 .route-line

的任何其他元素，首先使用类 .route-line 。

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

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和amp-custom-route-line）都将应用于该元素。 Take a look here

Answer 4

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