无法改变风格：nth-​​of-type（n）

Question

我遇到了伪类:nth-of-type(n)的问题。

我需要更改.aside_box_content 1,2,3,4 ...

的背景颜色

当div没有嵌套在其他div中时我尝试使用伪类，并且它有效，所以在某处出现了错误。

.aside_box_content {
  height: 130px;
  overflow: hidden;
}
.aside_box_content:nth-of-type(3) {
  background-color: purple;
}

<aside>
  <div id="aside_caption">INFO</div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">YOUTUBE</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">TWITTER</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">FACEBOOK</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">CALENDAR</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content">

    </div>
    <div class="footer_of_box_aside">TIME</div>
  </div>

</aside>

Answer 1

问题是nth-of-type元素必须与父母的直接子元素位于同一父元素中。将CSS更改为定位.aside-box。并将所有.aside-box div包装在单个父级中。

＆＃13;

＆＃13;

 .aside_box_content {
   height: 130px;
   overflow: hidden;
 }
 .aside_box:nth-of-type(3) .aside_box_content {
   background-color: purple;
 }

＆＃13;

<aside>
  <div id="aside_caption">INFO</div>
  <!-- NEW BOX -->
  <div class="aside_box_wrapper">
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">YOUTUBE</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">TWITTER</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">FACEBOOK</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">CALENDAR</div>
  </div>
  <!-- NEW BOX -->
  <div class="aside_box">
    <div class="aside_box_content"></div>
    <div class="footer_of_box_aside">TIME</div>
  </div>
  </div><!-- .aside_box_wrapper -->
</aside>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:nth-child代替:nth-of-type

 .aside_box_content {
     height: 130px;
     overflow: hidden;
 }
 .aside_box:nth-child(3) .aside_box_content {
     background-color: purple;
 }

<aside>
    <div id="aside_caption">INFO</div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">YOUTUBE</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">TWITTER</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">FACEBOOK</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">CALENDAR</div>
    </div>
    <!-- NEW BOX -->
    <div class="aside_box">
        <div class="aside_box_content"></div>
        <div class="footer_of_box_aside">TIME</div>
    </div>
</aside>