欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

使用:第n個子(奇數/偶數)選擇器來改變背景顏色[復制]

CSS
謝彥文2年前8瀏覽0評論

我用這個作為參考，不知道為什么它不工作。我錯過了什么嗎？我還嘗試使用:n-of-type(分別為1和2)，仍然沒有成功。

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}

.main-block {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  color: #ffffff;
  padding: 15px;
}

.icon-block {
  border-radius: 4px;
  padding: 10px;
}

.icon-block:nth-child(odd) {
  background: blue;
}

.icon-block:nth-child(even) {
  background: orange;
}

<div class="wrapper">
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
</div>

你這樣做:

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}

.main-block {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  color: #ffffff;
  padding: 15px;
}

.icon-block {
  border-radius: 4px;
  padding: 10px;
}

.main-block:nth-child(odd) .icon-block {
  background: blue;
}

.main-block:nth-child(even) .icon-block {
  background: orange;
}

<div class="wrapper">
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
</div>