html – 无法更改样式：nth-​​of-type(n)

我有一个伪类的问题：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>

解决方法

您可以使用：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>