嘗試使用第n種替代背景顏色

Question

我遇到了使用第n種類型選擇器的問題。我確定我的代碼結構導致了這個問題，但我已經用完了想法。

這裏是我的代碼...

<div class="blog-gallery container"> 
<div class="row"> 
    <?php query_posts('cat=6'); ?><?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 blog-list"> 
     <div class="blog-content"> 
      <h3 class="post-title"><?php the_title(); ?></h3> 
      <h6 class="post-author"><?php the_author() ?></h6> 
     </div><!--content--> 
    </div><!--col--> 
    <?php endwhile; endif; ?> 
</div><!--row--> 
</div><!--container--> 

和CSS ...

.blog-gallery { 

.blog-list { 
    min-height: 400px; 
    text-align: center; 
    color: white; 
    margin-bottom: 30px; 
    display: table; 

    .blog-content { 
     display: table-cell; 
     vertical-align: middle; 

     &:nth-of-type(1){ 
      background: $orange; 
     } 

     &:nth-of-type(2){ 
      background: $blue; 
     } 

     &:nth-of-type(3){ 
      background: $green; 
     } 

     &:nth-of-type(4){ 
      background: $blue; 
     } 

     &:nth-of-type(5){ 
      background: $green; 
     } 

     &:nth-of-type(6){ 
      background: $orange; 
     } 

     &:nth-of-type(7){ 
      background: $green; 
     } 

     &:nth-of-type(8){ 
      background: $orange; 
     } 

     &:nth-of-type(9){ 
      background: $blue; 
     } 

     .post-title, .post-author { 
      font-family: $b_font; 
     } 

     .post-title { 
      font-size: 32px; 
      font-weight: 300; 
     } 
    } 

} 
} 

我的問題是，我在9 .blog-之間試圖替代的背景顏色之間正在輸出的內容div ......但是，我無法這樣做，而且他們都默認橙色的顏色。再次，我相信這與我的html結構有關，但我無法指責它。

謝謝你的幫助！

Answer 1

對nth-of-type的說法應該是an+b的格式。在你的情況下，a將是9和b將是你目前有-1的參數。

Answer 2

你是否仔細檢查了你的CSS預處理器或你的顏色和字體變量或你的PHP沒有問題邏輯？

除了極細微的調整我使用SCSS

代碼 working well here

CSS

.blog-gallery { 

.blog-list { 
    min-height: 400px; 
    text-align: center; 
    color: white; 
    margin-bottom: 30px; 
    display: table; 

    .blog-content { 
     display: table-cell; 
     vertical-align: middle; 

     &:nth-of-type(1){ 
      background: orange; 
     } 

     &:nth-of-type(2){ 
      background: blue; 
     } 

     &:nth-of-type(3){ 
      background: green; 
     } 

     &:nth-of-type(4){ 
      background: blue; 
     } 

     &:nth-of-type(5){ 
      background: green; 
     } 

     &:nth-of-type(6){ 
      background: orange; 
     } 

     &:nth-of-type(7){ 
      background: green; 
     } 

     &:nth-of-type(8){ 
      background: orange; 
     } 

     &:nth-of-type(9){ 
      background: blue; 
     } 

     .post-title, .post-author { 
      // font-family: $b_font; 
     } 

     .post-title { 
      font-size: 32px; 
      font-weight: 300; 
     } 
    } 

} 
} 

HTML

<div class="blog-gallery container"> 
<div class="row"> 

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 blog-list"> 
     <div class="blog-content"> 
      <h3 class="post-title">title</h3> 
      <h6 class="post-author">author</h6> 
     </div><!--content--> 

     ... 

    </div><!--col--> 

</div><!--row--> 
</div><!--container--> 

Answer 3

好吧，我的朋友之一，我改變了PHP，並得到了它工作。

<div class="blog-gallery container"> 
<div class="row"> 
    <?php query_posts('cat=6'); ?><?php if (have_posts()) : 
    $blogNumber = 1; 

    while (have_posts()) : the_post(); ?> 
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 post-row"> 
     <div class=「blog-content blog-post-<?php echo $blogNumber++; ?>"> 
      <h3 class="post-title"><?php the_title(); ?></h3> 
      <h6 class="post-author"><?php the_author() ?></h6> 
     </div><!--content--> 
    </div><!--col--> 
    <?php endwhile; endif; ?> 
</div><!--row--> 
</div><!--container--> 

長話短說...生成的每個博客文章被分配一個編號（博客-後1，博客-後2等）。從那裏，我能夠針對具體的帖子，並適當地設計它。感謝您的建議！