CSS子選擇深度

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 
} 

或者，如果你想保留直系後代，那麼你可以有多個選擇器ru萊：

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

Answer 2

這裏是應用CSS子元素（例如）的方式 -

.class1 input { 
 
\t 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 
} 

以上選擇將.class1專區內選擇所有子input領域。它也將選擇.class2內的輸入字段，因爲.class2也是.class1的子項