html - 如何让 nth-child 使用嵌套标签？

Question

我试图让第 nth-child css 在嵌套标签上工作，但它似乎只适用于第一个标签和第二个标签。是否可以使其与多级嵌套标签一起使用？

我正在尝试将 blockquote 上的边框设置为偶数和奇数标记之间的不同颜色，这样用户就可以更轻松地查看页面上的内容。

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

Answer 1

你不能。 :nth-child 表示“ parent 的第 n 个 child ”而不是“第 n 代后代”。

对于您正在寻找的东西，CSS 没有捷径。

.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 */
}

...以及您需要的更多级别