Question

我有这个代码，我不明白为什么我的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>

Answer 1

浏览器的用户样式表样式h1和p，以及所有其他元素，它们的特异性高于body。

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

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

您可能也对CSS reset感兴趣。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

CSS - 样式不继承属性

4 个答案: