css - 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带有 class 的元素设置样式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*/}

请注意，两种样式的类（路由线和自定义路由线）都将应用于该元素。 看看这里

Answer 4

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