'html”、'body”和通用选择器在设置 HTML 元素样式方面有何不同？

使用 html、body 和通用选择器检查 HTML 元素样式的区别

深入研究 CSS 选择器，人们可能会遇到以下差异：它们在应用于同一个 HTML 文档时的行为。为了探索这些差异，让我们检查以下场景：

1。 html 选择器：

html {
  color: black;
  background-color: white;
}

此选择器为最外面的 html 元素设置样式。继承其颜色属性，其所有后代都继承黑色文本，包括 body 元素。但是，background-color 属性不会被继承，因此除非明确设置，否则 body 元素的默认透明背景保持可见。值得注意的是，html 元素的背景颜色填充了视口，即使它没有延伸其整个高度。

2. body 选择器：

body {
  color: black;
  background-color: white;
}

将样式应用于 body 元素会直接影响其所有后代。和以前一样，所有元素都继承颜色属性。此外，body 元素的背景颜色会传播到 html 元素，直到为 html 定义背景为止。因此，在大多数情况下，第一条规则还是第二条规则用于背景样式几乎没有实际区别。

3.通用选择器 (*)：

* {
  color: black;
  background-color: white;
}

通用选择器影响每个元素，打破颜色和背景颜色的继承链。该规则可以被更具体的选择器覆盖。虽然它的使用对于某些场景可能很有价值，但除非绝对必要，否则通常不鼓励通过通用选择器破坏继承。

以上是'html”、'body”和通用选择器在设置 HTML 元素样式方面有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！