设置全局CSS属性时,html,body和*之间有什么区别

con*_*ile 4 html css css3

我可以在以下块之一中设置全局CSS属性:

* {

}

html {

}

body {

}
Run Code Online (Sandbox Code Playgroud)

他们之间有什么区别?每个设置如何影响页面样式?

当我设置font-family或者color,我在哪里放置它?

bjb*_*568 13

*将选择所有元素.

html将选择<html>元素.

body将选择<body>元素.

有时他们做同样事情的原因是继承,这意味着你应用样式的元素的子元素也会得到相同的样式.(请参阅规范的"继承?"列,其中属性执行此操作).

如果继承适用,您应该选择bodyhtml因为*通常较慢,因此它在现代浏览器上不会产生太大影响.

另外,不要过度使用其中任何一个.它们非常广泛,您不希望为特定元素撤消样式.h1.header {color: red;}比...更好

* {
    color: red;
}
h2, h3, p, ul, ol {
    color: black;
}
Run Code Online (Sandbox Code Playgroud)

要么

* {
    color: red;
}
:not(h1) {
    color: black;
}
h1.other-header {
    color: black;
}
Run Code Online (Sandbox Code Playgroud)