CSS子选择器深度

我有以下HTML代码：

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

但我想知道我是否可以用一行CSS来实现这一点

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

您只需删除以下内容：

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

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

---

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

.class1输入{
左边距：15px；
}
.class1>输入{
背景颜色：浅绿色；
}
.class1>.class2>输入{
背景颜色：浅蓝色；
}

---

CSS选择器非常灵活。根据您的需求，您可以创建一个选择器，如下所示

.class1 input {
    margin-left:10px
}

上面的选择器将选择

.class1

div中的所有子

输入

字段。它还将选择

中的输入字段。class2

作为

。class2

也是

的子级

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

.class1 input {
    margin-left:10px
}