0

我有这样的设计：

<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
How can I style for widget-contentclass（Pagelist2ID 的子级）开头？
我尝试了这样的样式，但它不起作用：
body#layout > #Pagelist2 > .widget-content {....}

我想为班级设计风格.widget-content

4

4 回答 4

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

这不起作用，因为“>”：这意味着 #Pagelist2 必须是 body#layout 的直接子级。

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

这将起作用

于 2013-10-08T12:15:18.717 回答
1

您正在使用子选择器 >。

body#layout > #Pagelist2 > .widget-content

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

你想要的选择器是

#Pagelist2 .widget-content {...}

但是我的在哪里body#layout？

您不需要它，因为您的页面只能有一个 #Pagelist2有效，正如您在id 选择器规范中看到的那样。

于 2013-10-08T12:20:50.523 回答
1

任何一个

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

要不就

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

它对您不起作用，因为您使用的是子选择器并且#Pagelist2不是身体的直接子代。

于 2013-10-08T12:14:21.263 回答
-1

一些较旧的浏览器不完全支持“>”。所以你可以放弃它。

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

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

或者简化一下

#Pagelist2 .widget-content
于 2013-10-08T12:32:37.997 回答