2017-03-04 65 views
3

我有一個名爲entry的類,其中包含我網站的文章的不同部分。類似下面:將一個屬性分配給某個類的子節點

<div class="entry"> 
<div id="author-box-single"> 
    <div class="author-box"> 
    <div class="at-img"> 
    </div> 
    </div> 
</div> 

<h1></h1> 
<p></p> 
<h2></h2> 
</div> <!-- End of entry --> 

正如你看到它包含許多div S和頭條新聞等我如何分配一個屬性,例如padding-right: 10px所有child S的entry

+1

直接孩子還是嵌套孩子? –

+0

@RahulArora我想知道這兩種方法,但我也需要嵌套的孩子。 – ata

回答

4

*符號意味着一切。 >是指直接的孩子。例如:

.entry > * { 
    padding-right: 10px; 
} 

會將屬性分配給每個直接的孩子。

.entry * { 
    padding-right: 10px; 
} 

將分配屬性給它裏面的所有東西。

可以使用div而不是*

.entry > div { 
padding-right: 10px; 
} 

將分配給所有直接<div>孩子。

+0

但是我也必須添加'.entry> p',因爲它沒有作用於'p'。 – ata

+0

@ata你寫了什麼?當你使用'.entry> *'編寫時,它不會對'p'起作用。'' –

+0

我寫了'.entry *' – ata

2

對於具有類entry格直接孩子,你可以使用CSS組合子

CSS combinators

div.entry > div{ 
    padding-right: 10px; 
} 

對於所有具有的div(甚至嵌套)下的div類entry

div.entry div{ 
    padding-right: 10px; 
} 
相關問題