多个 :nth-child 语句

Question

我有一个帖子网格，我正在尝试为 h2 标签之间的每个标题赋予不同的颜色（绿色、红色、蓝色 - 一遍又一遍的那种模式）。

html（简体）是这样的：

<div class="fusion-posts-container">
       <div>
        <div>                       
             <div>
               <ul>
                 <li>
                   <div>
                     <img>
                       <div>
                          <div>
                            <a></a>
                            <div></div>
                            <a></a>
                            <h4><a></a></h4>
                            <div>
                               <a></a>
                            </div>
                          </div>
                        </div>
                     </div>
                    </li>
                </ul>
           </div>
        <div class="fusion-post-content-wrapper">
          <div class="fusion-post-content post-content">
             <h2 class="entry-title"><a>THIS TITLE</a></h2>

我已经尝试了几种方法，最接近定位该锚并更改其颜色的方法是：

.fusion-posts-container div:nth-child(3n+3) a{
color: #b7e352 !important;/*red*/
}

.fusion-posts-container div:nth-child(3n+1) a{
color: #fb5322 !important;/*green*/
}
.fusion-posts-container div:nth-child(3n+2) a{
color: #1592b0 !important;/*blue*/

}

但唯一有效的是红色，如果我同时使用它们，它会将最后一种颜色应用于所有标题。

我尝试了这个CSS: Can't get multiple :nth-child selectors to work，但没有成功，任何人都可以指出正确的方向吗？

Answer 1

假设这将是您对 HTML 的延续（您的问题没有），那么您可以使用 nth-of-type 而不是 nth-child 来实现这一目标

注意，而不是 nth-of-type(3n+1) ，用于到达项目 1、4、7 等等，因为您的代码有一个兄弟作为第一个 div 的内容，您不能使用第一个项目，所以计数改变，那么你应该数3n+4，意思是，它会从4到7再到10，等等。

.fusion-posts-container div:nth-of-type(3n+4) a {
  color: blue
}
.fusion-posts-container div:nth-of-type(3n+3) a {
  color: red
}
.fusion-posts-container div:nth-of-type(3n+2) a {
  color: green
}

<div class="fusion-posts-container">
  <div>
    <div>
      <div>
        <ul>
          <li>
            <div>
              <img>
              <div>
                <div>
                  <a></a>
                  <div></div>
                  <a></a>
                  <h4><a></a></h4>
                  <div>
                    <a></a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
      <div class="fusion-post-content-wrapper">
        <div class="fusion-post-content post-content">
          <h2 class="entry-title"><a>THIS TITLE</a></h2>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

尝试使用 (-n+1)

.fusion-posts-container div:nth-child(-n + 1) a{color: #b7e352 !important;/*red*/}

.fusion-posts-container div:nth-child(-n + 2) a{color: #fb5322 !important;/*green*/}

.fusion-posts-container div:nth-child(-n + 3) a{color: #1592b0 !important;/*blue*/}