主页 / 问题 / 891460
Accepted
Andrey Fedorov
Asked:2020-10-11 01:00:09 +0800 CST2020-10-11 01:00:09 +0800 CST

帮助我构建一个更智能的选择器

  • 772
  1. 选择器必须在相同的规则下列出{color: red}。
  2. 您无法撤消值 - 在用选择器替换它们之前，您不知道它们是什么。

它需要是这样的：

在此处输入图像描述

代码是这样的：

.parrent {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1em;
}

.child {
  width: 100px;
  height: 100px;
  border: 2px solid;
  background-color: blue;
}
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

ps：.parrent ~ .parrent .child:nth-child(3)- 显然，你不能写......

css

1 个回答

  1. Best Answer

    .parrent {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1em;
}

.child {
  width: 100px;
  height: 100px;
  border: 2px solid;
  background-color: blue;
}

.parrent:nth-child(4n+1) > .child:nth-child(1),
.parrent:nth-child(4n+1) > .child:nth-child(2),
.parrent:nth-child(4n+3) > .child:nth-child(3) {
  background-color: red;
}
    <div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

    • 1

相关问题