Question

有人能让我简单，易于理解JS旋转木马。我并不真正理解＆＃34;这个＆＃34;所以，你能解释一下发生了什么吗？

＆＃13;

div{
  height: 100px;
  width: 100px;
  display: inline-block;
}
div:nth-child(1) {
  background-color: red;
}
div:nth-child(2) {
  background-color: blue;
}
div:nth-child(3) {
  background-color: green;
}
.no {
  display: none;
}

＆＃13;

<div>
  <div class="yes"></div>
  <div class="no"></div>
  <div class="no"></div>
  <ul>
    <li>left</li>
    <li>right</li>
  </ul>
</div>
<div>
  <div class="yes"></div>
  <div class="no"></div>
  <div class="no"></div>
  <ul>
    <li>left</li>
    <li>right</li>
  </ul>
</div>

＆＃13;

Answer 1

div:nth-child(1) {
 background-color: red;
}

that means this CSS apply only on all first child div whose parent is <div> tag

First parent div's inside four child , three div and one <Ul> so basically according to our CSS it apply it on first div (color red).

second and third <div> block is hidden due to class ".no" containing display none property

如何使用功能制作简单的旋转木马？

1 个答案: