嵌套元素上的CSS和覆盖样式
[英]CSS & Overriding Styles on Nested Elements
问题描述
这是来自这里提出的另一个问题，但我认为这可能是一种“最佳实践”方法。
在设计网站时，设计师很可能会为网站中的所有元素组合一组通用样式。 （Div / Spans / H1 / H2s中文本的标准字体）
在表的情况下，它们可能也定义了默认的站点范围边界和对齐...例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
但是，如果表中有一个表（来自RSolberg的示例，DataGrid中的AJAX日历），那么您的父表和嵌套表都将继承这些样式。 （假设这就是为什么他们被称为Cascading）
我的问题是将样式应用于最顶层元素的最佳实践是什么，而没有子元素也继承它们。
你应该只提供一个覆盖来撤消你应用的任何样式。
例如
Table
{
border: dashed 1px #333333;
padding: 2px;
}
Table Table
{
border: solid 0px #000000;
padding: 0px;
}
4 个解决方案
解决方案1
12 已采纳 2009-04-21 18:43:20
如果您有这样的HTML：
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
( > 您可以使用 （ ) like this:> 将样式仅应用于) like this:body元素的元素div ， > ) like this:
body > div { border:solid 1px orange; } 嵌套的div不会获得边框。
欲了解更多信息，请访问： http://www.w3.org/TR/CSS2/selector.html#child-selectors 。
. 请注意，Internet Explorer 6不支持 。
解决方案2
3 2009-04-21 18:30:48
是。 “表格表”规则将覆盖“表格”规则，因为它更具体 。 您所描述的是为最外层表创建一个样式和为内部表设置另一个样式的最佳方法 - 假设两个表都没有允许您使用更多语义选择器的类或ID。
实际上，您更有可能需要将此技术用于列表。
ol { list-style: upper-roman }
ol ol { list-style: upper-alpha }
ol ol ol { list-style: lower-roman }
ol ol ol ol { list-style: lower-alpha }
解决方案3
1 2009-04-21 18:36:26
向外表添加一个类或id：
<style type="text/css">
.outer {border: dashed 1px #333333;}
</style>
</head>
<body>
<table class="outer">
<tr><td>before inner table.
<table>
<tr>
<td>Inside inner table.</td>
</tr>
</table>
After inner table.
</td>
</tr>
</table>
</body>
在这里看到它
如果您无法在HTML中添加id或类，并假设您要设置样式的表不在另一个表中，则可以通过指定哪个元素是以下子元素来设置它的样式：
div > table {border: dashed 1px #333333;}
在这里看到它
虽然该选择器仅在IE7中实现，但如果您需要支持IE6，则必须使用问题中的覆盖方法。
解决方案4
0 2009-04-21 18:54:12
我同意你对这个问题的初步想法，但这取决于具体情况。
始终创建基本规则并添加到样式表以及该规则的例外情况。
例如，如果您确定表中的表肯定永远不需要应用相同的样式，那么使用“表格表”选择器来设置样式。 但是，如果只发生一次，那么在父表上设置一个类，并修改“table table”选择器，使其成为“table.parent table”的行。
但是，“父”应该更改为元素的描述性名称，就像日历一样。 您不应该在特定样式之后命名一个类，因为如果样式发生更改则不再有意义。
嵌套元素上的CSS和覆盖样式仅部分起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.