12

这是由此处提出的另一个问题提出的，但我认为这可能具有“最佳实践”方法。

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

在表格的情况下，他们可能还定义了默认的站点范围边界和对齐方式......例如

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

但是，如果您在表中有一个表（来自RSolberg的示例，DataGrid 中的 AJAX 日历），那么您的父表和嵌套表都将继承这些样式。（假设这就是为什么它们被称为级联）

我的问题是将样式应用于大多数元素而不让子元素也继承它们的最佳实践是什么。

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

例如

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

Table Table
{
   border: solid 0px #000000;
   padding: 0px;
}
4

4 回答 4

15

如果你有这样的 HTML：


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

您可以使用div子选择器（body>) like this:

body > div
{
  border:solid 1px orange;
}

The nested div不会有边框。

欲了解更多信息，请访问：http://www.w3.org/TR/CSS2/selector.html#child-selectors。

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

于 2009-04-21T18:43:20.960 回答
4

是的。“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 }
于 2009-04-21T18:30:48.043 回答
2

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

看这里

如果您无法将 id 或类添加到 HTML 并假设您要设置样式的表不在另一个表中，您可以通过指定哪个元素是以下元素来设置它的样式：

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

看这里

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

于 2009-04-21T18:36:26.267 回答
0

我同意您对此的最初想法，但这确实取决于具体情况。

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

例如，如果您确定表格中的表格绝对不需要应用相同的样式，则使用“表格表格”选择器来设置样式。但是，如果这可能只发生一次，则在父表上设置一个类并将您的“表表”选择器修改为类似于“table.parent 表”的内容。

但是，“父”应该更改为元素的描述性名称，就像日历一样。您不应该以特定样式命名一个类，因为如果样式更改，它就不再有意义了。

于 2009-04-21T18:54:12.760 回答