嵌套元素上的CSS和覆盖样式

Question

这是来自这里提出的另一个问题,但我认为这可能是一种"最佳实践"方法.

在设计网站时,设计师很可能会为网站中的所有元素组合一组通用样式.(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;
}

Answer 1

如果您有这样的HTML:


<html>
  ...
  <body>
    <div>
      <div>
      <div>
    <div>
  </body>
</html>

你可以应用样式只对div了那是孩子body使用元素子选择器(>) like this:



body > div
{
  border:solid 1px orange;
}
Run Code Online (Sandbox Code Playgroud)

The nested div不会得到一个边界.

请注意,Internet Explorer 6不支持子选择器.

Answer 2

是的。“table table”规则将覆盖“table”规则，因为它更具体。您所描述的是为最外层表使用一种样式而为内部表使用另一种样式的最佳方法 - 假设两个表都没有允许您使用更多语义选择器的类或 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 }