Question

我的结构为

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

我如何为#schedule

添加样式信息

会不会像

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

Answer 1

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

或只是

#schedule{
 // css goes here
}

Answer 2

由于您使用的是id ，并且每页的ID必须是唯一的，因此您可以直接使用：

#schedule{
 // css goes here
}

Answer 3

只需#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>

假设你没有反复使用id（你不应该），你可以在没有嵌套选择器的情况下引用你的表：

#schedule {
  border-collapse: collapse;
}

Answer 4

关闭！它将是#page.item-page #schedule { ... }。

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 - ＆gt;浏览器说“好的，有ID的任何东西”安排“哦，那就是这张桌子。明白了。”

.item-page #schedule浏览器说“嗯......得到它，这个表，当它存在于类”item-page“的任何内容中时......仍然只是这个浏览器。

#page .item-page #schedule嗯..所以任何带有id“schedule”的东西都在“item-page”里面，在“#page”里面...... 等等！那不存在！

#schedule{
    //css
}

绰绰有余。

如果你想要一个继承的例子：

.item-page table{}

会影响.item-page

中的任何表格

.item-page>table{}

将影响任何作为.item-page

的DIRECT子项的表

css嵌套问题

6 个答案: