CSS子选择器深度

Question

我有以下的HTML代码：

<div class="class1">
   <input type="text">
   <input type="text">
   <div class="class2">
       <input type="text">
       <input type="text">
   </div>
</div>

我希望所有的输入字段都有 margin-left : 10px;

我知道我可以这样做：

.class1 > input {margin-left:10px}
.class1 > .class2 > input {margin-left:10px}

但我在想是否可以用一行CSS代码来实现这个效果

.class1 >>> input {margin-left:10px}
//>>> meaning "has .class1 in his familly tree"

- IggY

Answer 1

您可以只删除 直接后代：

.class1 input {
    margin-left:10px
}

或者，如果您希望保留直接后代，则可以使用多个选择器规则：

.class1 > input,
.class1 > .class2 > input {
    margin-left:10px
}

- Curtis

Answer 2

这里是将CSS应用于子元素的方法（例如）-

.class1 input {
 margin-left:15px;
}

.class1 > input {
    background-color:lightgreen;
}

.class1 > .class2 > input {
    background-color:lightblue;
}

<div class="class1">
   <input type="text">
   <input type="text">
   <div class="class2">
       <input type="text">
       <input type="text">
   </div>
</div>

- Xahed Kamal

Answer 3

CSS选择器非常灵活。对于您的要求，您可以创建以下选择器。

.class1 input {
    margin-left:10px
}

上面的选择器将选择 .class1 div 中的所有子 input 字段。它还将选择在 .class2 内的输入字段，因为 .class2 也是 .class1 的子元素。

- Nilesh Mahajan