CSS - 样式不继承属性答案

【问题标题】：CSS - Styles does not inherit propertiesCSS - 样式不继承属性
【发布时间】：2011-12-11 22:38:06
【问题描述】：

我有这段代码，但我不明白为什么我的 H1 及其关联的 P 标签没有获得 BODY css 元素中定义的字体和大小（无继承）.. 除非我取消注释 * css 样式，否则是什么一个非常糟糕的主意。如果这样做，我将无法更改它们的属性，在 P css 标记中重新定义它们（继承似乎是强制的）。

我对maaany标签有这个问题，我不想每次都重新定义字体和大小。

global.css

/*
* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
*/
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

p {
    text-align:justify;
    margin:0px;
    margin-bottom:10px;
}

HTML

<HTML>
<HEAD>
<TITLE>a</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK href="global.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV>
  <TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
    <TR>
      <TD width="1" valign="top"></TD>
      <TD valign="top">
        <div>
          <H1>Title</H1>
          <p>Some text</p>
        </div>
      </TD>
    </TR>
  </TABLE>
</DIV>
</BODY>
</HTML>

【问题讨论】：

您只是将字体大小添加到正文标签。不是实际的 h1 标签。您需要使用您想要的大小定义 h1 标记，或者在样式页面中取消注释您的 * 样式。

标签： html css inheritance styles

【解决方案1】：

浏览器的用户样式表样式h1 和p，以及所有其他单独的元素，比body 具有更高的特异性。

单独设置样式以覆盖这些样式。

h1, p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

您可能还对CSS reset 感兴趣。

【讨论】：

【解决方案2】：

默认情况下，h1 具有与浏览器关联的字体大小，默认情况下，您可以使用重置样式表来解决此问题，也可以简单地解决。

  h1,p{
font-size:12px;}

【讨论】：

【解决方案3】：

H1 和 P 都具有与默认浏览器样式不同的本地浏览器定义样式。没有任何样式信息，H1 看起来与正文中的文本不同，对吧？由于这些原因，您需要明确地覆盖它们。

html, h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

【讨论】：

【解决方案4】：

H1 元素不继承字体大小，因为它在浏览器的默认样式表中设置了字体大小。

P 元素不继承它，因为该元素位于表格单元格中，并且浏览器中的“怪癖模式”意味着表格破坏了继承。您的页面以 quirks 模式显示，因为它没有 doctype 声明；将<!doctype html> 放在开头是避免怪癖模式的最简单方法，但许多页面依赖怪癖模式并在“标准模式”下分解。

如果取消注释第一条使用通用选择器* 的规则，它将适用于所有元素，但会被样式表中的任何其他规则覆盖，例如p { font-size: 5px }。如果情况似乎并非如此，则另一条规则中存在错误——首先使用W3C CSS Validator 检查语法。

【讨论】：