CSS 选择器应用于 HTML 页面正文元素

Question

我有 4 个不同的页面（页面 A、B、C、D）和 css 代码

body{
    margin-top:50px;
}

假设我希望页面 B 具有不同的页边距 (margin-top:20px;) 那么我该如何将其放入 css 文件中。

像下面这样的东西可能会很酷。

@pagename.body{
   margin-top:20px;
}

Answer 1

要实现此目标，请将以下内容添加到您的 HTML：

<body id="pagename">

并相应修改CSS：

body#pagename{
   margin-top:20px;
}

如果同一样式适用于多个页面，您可以使用 class 而不是 id:

HTML

<body class="pagename">

CSS

body.pagename{
   margin-top:20px;
}

请注意，在 CSS 选择器中使用 HTML body 标记是可选的：您可以只使用 #pagename 而不是 body#pagename，或者 .pagename 而不是 body.pagename.

此外，下面是页面 body 元素的直接样式示例，它提供了最紧凑的样式语法（与您的 CSS 示例相关）：

<body style="margin-top:20px;">

希望这可能有所帮助。最好的问候，

Answer 2

HTML:

<body class="myBodyClass">

CSS:

.myBodyClass { margin-top: 20px; }

我不会使用 body.myBodyClass，因为那有点像 "overqualifying"，只需选择一些合理命名的 class，即不要将其命名为 "extraMargin"，而是 "certainPageType"（无论页面是什么类型），以防您将来想要设计的不仅仅是额外的边距。

CSS Selector applied to HTML Page body element