如何使nth-child与嵌套标签一起使用? [英] How to make nth-child work with nested tags?

问题描述

我正在尝试让第n个子级css在嵌套标签上工作，但它似乎仅适用于第一个标签和第二个标签.是否可以使其与多层嵌套标签一起使用?

I'm trying to get the nth-child css to work on a nested tags, but it seem to only work for the first tag and the second tag. Is it possible to make it work with multiple level of nested tags?

我正在尝试将blockquote上的边框设置为偶数和奇数标签之间的不同颜色，以使用户更容易看到页面上的内容.

I'm trying to set the border on the blockquote to different color between even and odd tags, so that would make it easier for the user to visualize the content on the page.

.test:nth-child(odd) {
    font-size: 14px;
    border-left: 5px solid #347bb8;
}

.test:nth-child(even) {
    font-size: 14px;
    border-left: 5px solid #000;
}

<blockquote class="test">
  <blockquote class="test">
    <blockquote class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet urna et velit rhoncus elementum. Curabitur lacinia semper aliquet. Integer magna nisi, faucibus commodo lacus sed, ullamcorper lobortis nunc. Morbi pharetra id turpis vitae consectetur. Nulla viverra felis erat, at fermentum lectus commodo sit amet. Etiam at vehicula ante. Pellentesque et hendrerit leo, vitae tincidunt leo. Proin at leo posuere, gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis, ultricies accumsan nulla suscipit. Cras ex ex, feugiat id nulla ut, lacinia elementum ligula. Ut eu augue porttitor, maximus dolor eu, euismod nisl. Mauris vehicula purus a vehicula dapibus. Donec in mauris sed tellus scelerisque fermentum et vitae massa. Fusce ultrices diam vestibulum nisi commodo, ultricies tristique risus consectetur.
    </blockquote>

    More text Here
  </blockquote>
  
  More text here 
 </blockquote>

推荐答案

您不能.:nth-​​child 的意思是父母的第n个孩子"，而不是第n代后代".

You can't. :nth-child means "The nth child of the parent" not "The nth generation of descendants".

CSS没有您要查找的快捷方式.

CSS has no shortcuts for what you are looking for.

.test {
   /* Default (even generation)
}

:not(.test) > .test,
:not(.test) > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test,
:not(.test) > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test > .test {
   /* odd generation */
}

…以及您需要的更多级别

… and as many more levels as you need

这篇关于如何使nth-child与嵌套标签一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！