这是来自
here问的另一个问题,但我认为这可能是一种“最佳实践”方法.
在设计网站时,设计师很可能会为网站中的所有元素组合一组通用样式. (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;
}
解决方法
如果您有这样的HTML：
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
您可以使用子选择器(>)将样式仅应用于body元素的子div,如下所示：
body > div
{
border:solid 1px orange;
}
嵌套的div不会获得边框.
欲了解更多信息,请访问：http://www.w3.org/TR/CSS2/selector.html#child-selectors.
请注意,Internet Explorer 6不支持子选择器.