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

【问题标题】：CSS & Overriding Styles on Nested Elements嵌套元素上的 CSS 和覆盖样式
【发布时间】：2009-04-21 18:25:28
【问题描述】：

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

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

【问题讨论】：

我知道这两种解决方案都适用。我只是想从 Html/Css 设计师的角度来看什么是最佳实践。我认为没有神奇的 CSS 标志说“应用 N 级深度并停止”

标签： html css styles

【解决方案1】：

如果你有这样的 HTML：


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

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

身体> div { 边框：实心 1px 橙色； }

嵌套的 div 不会有边框。

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

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

【讨论】：

啊哈这更接近我的想法。因此，您可以指定“顶级站点样式”，这将应用于站点的主要结构，而不必担心搞砸这些元素的内容。谢谢克努特

【解决方案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>

看here

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

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

看here

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

【讨论】：

这并不总是可行的，山姆。在某些情况下，您正在处理喷出 HTML 的服务器端控件，而必须添加 ID/类名可能意味着编写一些繁琐的 OnRender 代码来添加它。我说的是在没有 #IDs/.ClassNames 可供过滤时在不同嵌套级别提供覆盖的最佳实践方式
添加了一种无需添加到 HTML 的方法，但在 IE6 不再使用之前，我们可能需要一段时间才能将其称为标准做法。

【解决方案3】：

是的。 “table table”规则将覆盖“table”规则，因为它是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 }

【讨论】：

【解决方案4】：

我同意你最初的想法，但这取决于具体情况。

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

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

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

【讨论】：