logo标签列表

如何将CSS应用于HTML的body元素？

javascripthtmlxhtmlcss
17

我正在尝试去除这个：

document.body.className = "someclass";

我想用CSS来实现这个效果。

body.someclass {
.
.
.
}

不幸的是，我无法在Firefox和Chrome中使其工作。

我做错了什么？有没有办法将CSS类应用于body？

3个回答
17

你正在做两件不同的事情。你的JavaScript实际上是将类名“someclass”分配给body元素，而你的CSS则是使用类名“someclass”样式化一个body元素，它不会将类名分配给它，这不是CSS的任务。在纯(X)HTML中，你可以像这样做：

<body class="someclass">
谢谢，我能够通过这种方式应用。 - Manohar
11

问题的一部分是有效的XHTML每个文档只能有一个<body>元素。类通常被赋予出现多次的元素（或者说，要应用多次的样式）。

由于只有一个body，因此我从未给它添加ID或类。只是样式：

body {
    background-color: red;
}
如果您想重用一个类，请在选择器中使用逗号：
.coolStyle, body {
    font-weight: bold;
    color: red;
    text-decoration: blink;
}

然而，所有这些可能都是毫无意义的，因为应用于<body>标签的任何样式都会被其子元素继承，除非明确指定不同的样式。

也许他稍后会使用JavaScript更改类，并希望以冗长的方式提供默认值？当然，我只是在做假设。 - Dominik Honnef
我认为需要注意的是，只有一个body标签，但如果链接到外部CSS文件，则该文件可能会遇到需要不同样式的多个网页。如果您在头部使用文档级别的CSS样式而不是在外部CSS文件中添加body标签类，则也有点无意义。 - Nitrodist
7

在文档中只有一个body，因此不需要对body进行类的设置。除非您想通过更改JavaScript类来更改body的样式。

如果必须对body进行类的设置，请按照以下方式进行：

<body class="someclass">

然后访问该类并在您的CSS中修改样式，如下所示：

body.someclass{
  ...(style parameters goes here)
}

然而，您可以更改标签的所有元素的样式，由于您只有一个body，因此您可以将其添加到CSS中：

body{
  ...(style parameters)
}

不要在HTML中添加任何内容。但是对于重复的标签，请使用class进行样式设置，这些样式将在页面上多次使用；对于只在页面上使用一次的样式，请使用id进行样式设置。您可以在HTML中像这样为标签分配id：

<tag id="someid">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接