Question

我正在尝试让第n个子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的意思是“父母的第n个孩子”，而不是“第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 */
}

…以及您需要的更多级别

Answer 2

您可能会有所不同，并使用其他技巧来实现。这是一个考虑一些背景的示例，您只需要了解最后一个元素即可：

blockquote {
  font-size: 14px;
  margin-left: 30px;
  padding-left: 5px;
  margin-top:0;
  margin-right: 0;
  position:relative;
}
blockquote:after {
  content:"";
  position:absolute;
  top:100%;
  height:100vh;
  left:0;
  right:0;
  z-index:-1;
  background:#fff;
}

.last {
  background: #fff content-box;
}

.first {
  overflow:hidden;
  z-index:0;
  background: repeating-linear-gradient(to right, 
    #000, #000 5px, 
    transparent 5px, transparent 35px, 
    #347bb8 35px, #347bb8 40px, 
    transparent 40px, transparent 70px);
}

<blockquote class="first">
  <blockquote>
    <blockquote>
      <blockquote>

      <blockquote class="last">
        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,
      </blockquote>
      text1 Here Here Here Here
    </blockquote>
    text2 Here gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis,
    </blockquote>
    Here gravida purus non, euismod mauris. Curabitur porttitor sapien quis risus convallis,
  </blockquote>

  text3 here
</blockquote>

如何使nth-child与嵌套标签一起使用？

2 个答案: