CSS嵌套的問題

Question

我有一個結構

<div id ="page" class="item-page"> 
<table id="schedule"> 
</table> 
</div> 

如何將我放在樣式信息＃附表

難道是像

#page .item-page #schedule{ 
// css goes here 
} 

Answer 1

關閉！這將是#page.item-page #schedule { ... }。

Answer 2

只是#page #schedule會正常工作。

在你的代碼，#page和.item-page是相同的元素，所以如果你在你選擇使用這兩個你就必須綁在一起，他們就是這樣，#page.item-page而不是將它們之間的空間，這表明二是第一個孩子。

因此，儘管#page #schedule表示此：

<div id="page" class="item-page"> 
    <table id="schedule"></table> 
</div> 

#page .item-page #schedule實際上代表了這一點：

<div id="page"> 
    <div class="item-page"> 
    <table id="schedule"></table> 
    </div> 
</div> 

你不使用一遍又一遍的IDS（你不應該）假設，你可以只請參考您的沒有嵌套選擇器的表格：

#schedule { 
    border-collapse: collapse; 
} 

Answer 3

#page.item-page #schedule{ 
// css goes here 
} 

或只是

#schedule{ 
// css goes here 
} 

Answer 4

由於您使用的ID 和id必須是每頁獨一無二的，你可以直接使用代替：

#schedule{ 
// css goes here 
} 

Answer 5

您可以有幾種方法做到這一點：

簡單：

#schedule { 
} 

ID Selector 
#page #schedule { 
} 

div#page table#schedule { 
} 


Class Selector 
.item-page #schedule { 
} 


div.item-page #schedule { 
} 


Both 
div#page.item-selector table#schedule { 
} 

Answer 6

您應該specificity閱讀起來。和inheritance總之，沒有理由做那個具體的事情。

CSS從右向左解析你的規則，所以這裏是瀏覽器級別發生的事情。

#schedule - >瀏覽器說：「好的，任何與ID」日程安排「，哦，這就是這張桌子，明白了。

.item-page #schedule瀏覽器說：「嗯......知道了，此表中，當存在內部與類東西‘項目頁面’那......還只是這個瀏覽器。

#page .item-page #schedule嗯..所以什麼id爲「時間表」那裏面的「項目頁面」那裏面的「#page」 ...... 等等！這不存在！

#schedule{ 
    //css 
} 

就綽綽有餘了。

如果你想繼承的例子：

.item-page table{} 

會影響.item頁內部的任何表

.item-page>table{} 

會影響任何表，它是.item頁的直接子