Question

我有以下HTML代码：

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

我希望所有输入字段都有左边距：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"

Answer 1

您只需删除direct descendant：

即可

.class1 input {
    margin-left:10px
}

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

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

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>

Answer 3

CSS选择器非常灵活。根据您的要求，您可以按如下方式创建选择器。

.class1 input {
    margin-left:10px
}

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

CSS子选择器深度

3 个答案: