Question

我想使用css选择所有元素，直到它到达具有特定属性的元素。即：

<ul>
    <li>...</li>
    <li>...</li>
    <li class="active">...</li>
    <li>...</li>
    <li>...</li>
</ul>

我需要捕获<li>之前出现的所有active元素。我知道如何使用nth-child等捕获任何子元素组，但active更改，因此它不能成为静态组。而且我知道我可以通过javascript来实现，但我不是一个css解决方案。

那么可以选择所有子元素直到计算点吗？或者换句话说：有没有办法让一个有条件的nth-child？我愿意在需要时更改标记（该属性不必是一个类，它可以是任何东西）。

直到最近，我才认为这是不可能的，但在了解了css attr()后，我知道它可以访问DOM属性，所以也许它＆＃39 ; s还有可能更进一步吗？

Answer 1

您可以通过执行以下操作来覆盖css：

ul > li{
    /* normal styling for li above active */
}

ul > li.active ~ li{
    /* overriding the above stylings for elements after li.active element */
}

如果属性不是类，则可以执行ul > li[attrName="active"] ~ li。

<强> Working Fiddle

Working Fiddle （如果＆＃34;有效＆＃34;属于其他属性）

CSS：有没有办法做一个有条件的nth-child

1 个答案: