代码之家 › 专栏 › 技术社区 › Ennio

如何使nth子级使用嵌套标记?

css html

Ennio · 技术社区 · 7 年前

我试图让第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>

2 回复 | 直到 7 年前

Quentin 7 年前

你不能。 :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 */
}

_以及您需要的更多级别

Temani Afif 7 年前

你可能会有不同的想法,并使用其他技巧来实现这一点。下面是一个例子,考虑到一些只需要知道最后一个元素的背景:

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>