Question

我想按文本的重要性来组织页面。即我想制作最重要的文本h1等。这样做是为了使搜索引擎可以找到要显示在结果摘录文本中的正确文本。

但是，我不想让这些样式决定文本的显示方式，因此我在CSS中为.html和.body设置了某些默认值，并且希望标题（h1 ...）从它们继承。（并且我会在需要的地方为页面定制样式。）

不幸的是，标题似乎以不同的方式显示，例如较大的字体。那么，有什么方法可以告诉浏览器将标题视为样式的正文？（我知道我可以为标题设置CSS，但是当有人更改.body CSS却忘记更改h1 CSS时会发生什么……）

Answer 1

您可以像这样简单地在CSS工作表的顶部设置设置样式。

h1{}
h2{}
body{}

或

body h1{}
body h2{}

要稍后调整这些样式，只需在CSS表格的下方添加新样式。自从你 CSS工作表是一个层叠样式表，它从工作表的顶部向下继承样式。

Answer 2

尝试一下，现在您不需要在所有地方都更改类，因为js会更改它，并且您可以使主体和标头具有相同的样式，但仍然可以有所不同：

window.onload = function() {
  document.getElementsByTagName("body")[0].className = "myClass";
  let h1s = document.getElementsByTagName("h1");
  for (let i = 0; i < h1s.length; i++) {
    h1s[i].className = "myClass";
  }
};

.myClass {
  font-size: 30px;
  color: red;
  font-weight: normal;
}

<!DOCTYPE html>
<html>

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

</html>

使标题（h1，h2，...）从正文继承样式

2 个答案: