Question

Supose我有一个我无法控制的dom结构（即生成）。

<div>
    ... more dom here ...
    <span>
        ... more dom here ....
        <span>
            ... more dom here ...
        </span>
        ... more dom here...
    </span
    ... more dom here ...
</div>

事实是，我将此结构表示为3级，但它可能具有许多级别：第一个跨度不是div的直接子级，而是后代，第二个跨度不是必要的第一个跨越的孩子，但后代。

此外，由于我可以控制许多结构，因此可能有更多级别：更多嵌套的span标记。

我的问题是：

如何通过CSS获取最后span级别？这意味着：每个div span都没有span个后代。
我如何才能通过CSS获得第一个span级别？这意味着：每个div span在（预期的）最后一个跨度和div之间的dom路径中没有任何span。

我为那些选择器使用jQuery，但由于代码是动态的并且可以出现更多组件，我不能使用jQuery代码来过滤我期望的内容并应用样式。

Answer 1

根据子元素（或没有子元素）定位任何元素所需的内容基本上是parent选择器。它已被提出并要求相当多，但它仍然不存在于CSS中。您可以使用jQuery，或者也可以使用任何服务器端语言将类（例如：last-level）添加到适当的跨度。
要定位直接位于div内但不在另一个span内的跨距，请使用子选择器 DIV＆GT;跨度

Answer 2

仅使用CSS选择器也不可能。适当的jQuery选择器分别是

div span:not(:has(span))和
div span:not(span span)

但正如您所看到的，这些都不是有效的CSS选择器：:has()选择器在CSS中不可用，:not() does not allow combinators in CSS。

特别是：

即使有一个重要的规则，如果没有先前的假设或标记知识，也无法到达最里面的span。例如，您需要事先知道您的结构将有多少span个元素级别，然后相应地定位确切的数字。如果您无法事先知道这一点，那么您别无选择，只能想办法将类名应用于最里面的span，以便您的CSS可以定位它。< / p>

如果使用覆盖规则撤消任何嵌套span的样式，则将样式应用于最顶层span是可行的：

div span {} div span span {}

Answer 3

至于只使用CSS到达元素的第一个后代，你可以这样做：

div > span {
    // your styles
}

就使用CSS达到任意深度的嵌套元素数量而言，我认为你无法动态动态。 LESS和SASS（一般只有CSS预处理器）具有一些动态功能，具体取决于你想做什么，所以也许你可以查看它们。

我确定有一种方法可以使用jQuery选择器来达到你想要的任意深度嵌套元素......例如，像这样：

$('div span').each(function() {
    if( /* $(this) is at a certain level */ ) {
         $(this).css( /* your style */ );   
    }
});

如果您可以发布更相关的代码，也许这可以帮助我更多地使用更好的解决方案来编辑我的答案。

CSS - 造型最近的后代

3 个答案: