html - 在 css 中应用偶数选择器时遇到问题

Question

我有一个这样的 DOM 结构

<div class="row">
  <div class="col-sm-6"><span>1.</span>
    <div class="input_wrap">
      <input type="text">
    </div>
  </div>
  <div class="col-sm-6"><span>2.</span>
    <div class="input_wrap">
      <input type="text">
    </div>
  </div>
</div>

我尝试使用这个 css

.input_wrap {
  overflow: hidden;
  &:nth-child(even) input {
    background: red !important;
  }
  input {
    width: 97%;
    margin-left: 3%;
    height: 40px;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
  }
}

为什么偶数选择器影响两个输入元素？我想选择所有左侧的输入为红色。

Answer 1

查看这段代码

.col-sm-6:nth-child(even) input {
    background: green !important;
  }

<div class="row">
  <div class="col-sm-6"><span>1.</span>
    <div class="input_wrap">
      <input type="text">
    </div>
  </div>
  <div class="col-sm-6"><span>2.</span>
    <div class="input_wrap">
      <input type="text">
    </div>
  </div>
</div>

因此第 n 个子节点会根据其父节点查找每个元素..

所以你的两个 input_wrap 都是他们相应 parent 的第二个 child ，这就是为什么他们都匹配的原因