无法使用 :nth-of-type(n) 更改样式

Question

我对伪 class :nth-of-type(n) 有疑问。

我需要更改 .aside_box_content 1,2,3,4...的背景颜色...

我尝试在 div 未嵌套在其他 div 中时使用伪 class 并且它有效，所以某处出错。

.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 包装在一个父级中。

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

<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>

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>

无法使用 :nth-of-type(n) 更改样式

Cannot change style with :nth-of-type(n)

html

css

css-selectors