在 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.


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

css 透明头痛