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

发布时间：2020-12-14 23:50:29 所属栏目：资源来源：网络整理

导读：这是来自 here问的另一个问题,但我认为这可能是一种“最佳实践”方法. 在设计网站时,设计师很可能会为网站中的所有元素组合一组通用样式. (Div / Spans / H1 / H2s中文本的标准字体) 对于表格,他们可能也在定义默认的全站点边界和对齐方式……例如 Table{ bo

这是来自 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不支持子选择器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!