我如何風格的CSS

第n次DIV我的設計是這樣的：我如何風格的CSS

<body id="layout"> 
<div id="section-header"> 
    <div class="widget" id="Pagelist1"> 
    <div class="widget-wrap1"> 
    <div class="widget-wrap2"> 
     <div class="widget-content"> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="widget" id="Pagelist2"> 
    <div class="widget-wrap1"> 
    <div class="widget-wrap2"> 
     <div class="widget-content"> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 
</body>

要求：CSS總是以body#layout
我如何樣式widget-content類（Pagelist2 ID的孩子）？
我試過的造型像這一點，但它不工作：
body#layout > #Pagelist2 > .widget-content {....}

我想樣式類.widget-content

來源

2013-10-08 Minh Anh

Oh.sorry。這是我的錯誤。 –

好的，你的答案已經在下面:) – Harry

要麼

#layout #Pagelist2 .widget-content {....}

或只是

#Pagelist2 .widget-content {....}

：這不是什麼爲你工作，因爲你正在使用孩子lector和#Pagelist2不是身體的直接孩子。

來源

2013-10-08 12:14:21 Coop

oh.that是正確的。我從你那裏學到了一些新知識。非常感謝。 –

沒問題。很高興我能幫上忙。 – Coop

值得注意的是，這個選擇器'空間'被稱爲'後代選擇器'，這意味着它將適用於包含在元素中的所有匹配，而不僅僅是一個直接的孩子 – Don

body#layout > #Pagelist2 > .widget-content {....}

這不是因爲「>」：這意味着＃Pagelist2必須直接是body＃layout的子項。

body#layout #Pagelist2 .widget-content {...}

這將工作

來源

2013-10-08 12:15:18

非常感謝。 –

您使用的是child selector>。

body#layout > #Pagelist2 > .widget-content

洙你的CSS設置所有.widget-content元素是#Pagelist2誰是body#layout直接孩子直接孩子的風格，但你不要對你的HTML標記這條產業鏈。

你想要的是

#Pagelist2 .widget-content {...}

但哪裏是我的body#layout誰的選擇？

你不需要它，因爲你的頁面只能有ONE#Pagelist2是有效的，因爲你可以在id selector規範見。

來源

2013-10-08 12:20:50

body＃layout是必需的，因爲它僅適用於Blogger中的主頁佈局。謝謝你的幫助。我非常感謝所有的建議和你的。 –

高度推薦你將它改爲一個類而不是id。 Id的特異性較高，所以仔細使用 –

-1

'>'並不完全受某些舊版瀏覽器支持。所以你可以放棄。

您可能想要指定結構的完整路徑。

body#layout #Pagelist2 .widget-wrap1 .widget-wrap1 .widget-content

或者把它簡化

#Pagelist2 .widget-content

來源

2013-10-08 12:32:37

'>'支持回ie7。這不是擺脫它的原因，這是因爲他正在尋找後代選擇器，而不是子選擇器 – Don

我如何風格的CSS

回答

相關問題