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

请参阅此代码

＆＃13;

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

＆＃13;

input_wrap

＆＃13;

所以第n个孩子会查找与其父元素相关的每个元素。

所以你的{{1}}都是他们相应父母的第二个孩子，这就是为什么他们两个都匹配

Answer 2

您可以执行以下操作以使所有＆＃34;左侧＆＃34;输入红色：

.col-sm-6:first-child input{
  background: red;
}

Answer 3

nth-child仅适用于同一父级内的元素。因此，如果您想要选择每行的所有偶数输入，请执行以下操作：.row > [class^="col"]:nth-child(even) input。

如果你想只是第一个输入是红色使用： [class^="col"]:first-child input

Answer 4

实际上你需要这个选择器：

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

因为.input_wrap始终是其父级中的第二个子级，因此您的原始规则将应用于每个.input_wrap实例，因此应用于每个输入字段。所以你不应该计算＆＃34;您选择的.input_wrap，但是他们的父元素（.col-sm-6），之后添加输入选择器，就像我在上面的解决方案中所做的那样。

http://codepen.io/anon/pen/ZeOVQg

另外：您写道：＆＃34;我想选择所有左侧输入为红色。＆＃34;这将是odd个，如

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

http://codepen.io/anon/pen/qrNLaa

有问题在css中应用奇数选择器

4 个答案: