Question

我的设计是这样的：

<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

的样式

Answer 1

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

由于“＆gt;”这不起作用：这意味着＃Pagelist2必须是body＃layout的直接子代。

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

这将有效

Answer 2

要么

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

或只是

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

它不适合你，因为你使用的是儿童选择器而且#Pagelist2不是身体的直接孩子。

Answer 3

您使用的是child selector >。

body#layout > #Pagelist2 > .widget-content

所以你的CSS设置了所有.widget-content元素的样式，这些元素是#Pagelist2的直接子元素，它们是body#layout的直接子元素，但是你的HTML标记上没有这个链。 / p>

您想要的选择器是

#Pagelist2 .widget-content {...}

但我的body#layout在哪里？

您不需要它，因为您的网页只能 ONE #Pagelist2才有效，您可以在id selector规范中看到。

Answer 4

'＆GT;'一些旧的浏览器不完全支持。所以你可以放弃它。

您可能想要指定结构的完整路径。

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

或简化

#Pagelist2 .widget-content

如何用CSS设置第n个div的样式

4 个答案: