如何使用CSS设置第n个div样式
[英]How can I style the n-th div with CSS
问题描述
我有这样的设计：
<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样式
4 个解决方案
解决方案1
2 2013-10-08 12:15:18
body#layout > #Pagelist2 > .widget-content {....}
由于“>”而不起作用，这意味着＃Pagelist2必须直接是body＃layout的子代。
body#layout #Pagelist2 .widget-content {...}
这会起作用
解决方案2
1 已采纳 2013-10-08 12:14:21
要么
#layout #Pagelist2 .widget-content {....}
要不就
#Pagelist2 .widget-content {....}
它对您不起作用，因为您使用的是子选择器，而#Pagelist2并不是该主体的直接子代。
解决方案3
1 2013-10-08 12:20:50
解决方案4
-1 2013-10-08 12:32:37
一些较旧的浏览器不完全支持“>”。 因此，您可以删除它。
您可能要指定结构的完整路径。
body#layout #Pagelist2 .widget-wrap1 .widget-wrap1 .widget-content
或简化它
#Pagelist2 .widget-content
使用'n-child child'更新表中的第n行：第一行出错
[英]Updating n-th Row in Table with 'n-th child': on first row there is an error
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.