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页的直接子