Question

这是来自另一个问题here，但我认为这可能是“最佳实践”方法。

在设计网站时，设计师很可能会为网站中的所有元素组合一组通用样式。（Div / Spans / H1 / H2s中文本的标准字体）

对于表格，它们可能也是定义默认的全站点边界和对齐方式......例如

Table
{
   border: dashed 1px #333333;
   padding: 2px;
}

但是如果你在表格中有一个表格（来自RSolberg的例子，一个DataGrid中的AJAX日历），那么你的父母和嵌套表将继承这些样式。（假设这就是他们被称为级联的原因）

我的问题是，如果没有子元素也可以继承它们，那么将样式应用于最顶层元素的最佳做法是什么。

你是否应该提供一个覆盖来撤消你所应用的任何样式。

e.g。

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 {{1}仅将样式应用于body元素的子>) like this: }}

) like this:不会获得边框。

有关详细信息，请访问： http://www.w3.org/TR/CSS2/selector.html#child-selectors。

请注意，Internet Explorer 6不支持子选择器。

Answer 2

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

Answer 3

在外表中添加一个类或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>

见here

如果你不能在HTML中添加id或类，并假设你想要样式的表不在另一个表中，你可以通过指定哪个元素是一个子元素来设置它的样式：

div > table {border: dashed 1px #333333;}

见here

尽管该选择器仅在IE7中实现，但如果您需要支持IE6，则必须使用问题中的覆盖方法。

Answer 4

我同意你对这个问题的初步看法，但这取决于具体情况。

始终创建基本规则并添加到样式表中，但该规则有例外。

例如，如果您确定表中的表肯定永远不需要应用相同的样式，那么使用“表格表”选择器来设置样式。但是，如果只发生一次，那么在父表上设置一个类，并修改“table table”选择器，使其成为“table.parent table”的行。

但是，“parent”应该更改为元素的描述性名称，就像日历一样。您不应该在特定样式之后命名一个类，因为如果样式发生更改则不再有意义。

CSS＆amp;覆盖嵌套元素上的样式

4 个答案: