在 CSS 中,是否可以递归地从 body 中选择所有的 :last-child?
鉴于此标记:
<body>
<div id="_1">
<div id="_2"></div>
</div>
<div id="_3">
<div id="_4">
<div id="_5"></div>
<div id="_6"></div>
</div>
</div>
</body>
我正在寻找 div 号。 3、4 和 6
另一种表达方式是这样的:
body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
/* My stuff here */
}
但这显然不是一个好方法。
请您参考如下方法:
不,不幸的是,这几乎是不修改 HTML 的唯一方法。
已经有at least one request对于 :first-child
和 :last-child
伪类的递归版本,但它似乎并没有获得太多青睐。请注意,它建议以与您的问题相同的方式嵌套和重复伪类:
Currently, AFAIK, we can only match children up to some exact nesting level known in advance (3 in the example below):
.container > :first-child, .container > :first-child > :first-child, .container > :first-child > :first-child > :first-child {}
We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.
So we need a sort of recursive selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.