Question

将CSS应用于body标签和通用选择器（*）之间是否有任何区别？在应用特异性规则时，哪种情况优先。

Answer 1

使用通用选择器应用样式会将代码应用于每个元素

将样式应用于正文只会影响正文，但其他元素可能继承这些样式

通用选择器的特性是您可以使用的最低值。有关这方面的更多信息，请参阅W3C docs

Answer 2

body是for body，（*）是for（*）？ X）如果某些代码（我希望不是）不在体内，那么CSS仍然适用:)

Answer 3

选择器(*)用于页面的所有元素（头部，主体......）。但是，如果应用body标签，则仅修改了body元素。

Answer 4

我们来看这个例子：

body{ 
  background-color: red;
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

与

不同

* {
  background-color: red
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

因为*选择器会将background-color应用于 EVERY 元素。

带有*的{{1}} - 选择器将导致

background-color: red

请注意，这不会在源代码中出现（至少如果您没有使用SCSS或LESS或类似的预处理器）。这就是层次结构的定义方式。

Answer 5

正如其他人已经指出*搜索所有元素。简而言之，只要您指定特定标记，标记就会自然地定位它自己的环境。但是，另一个原因是因为html选择器被视为任何文档的根，body是后代。所以* {}！= html, body {}中的所有元素因此，正如您所询问的那样，*不等于<body>。此外，更有趣的是，:root和html都定位同一事物，除了:root优先于html对等物。

请参阅HTML spec只有2个元素来自HTML根<head>和<body>。见body spec

这是一个简短的片段，可帮助您实现可视化：

* {
  background-color: green;
}

body {
  background-color: blue;
}

:root {
  /* i have higher priority over html {} */
  background-color: pink;
}

html {
  background: purple;
}

<p>
  test
</p>
<div>
  test2
</div>
<footer>
  Copyright &copy; 2018
</footer>

将CSS应用于通用选择器（*）有什么区别

5 个答案: