Question

我有几页。 page1 <body id="page1">，page2 <body id="page2">，page3 <body id="page3">然后我想在一个css文件'style.css'中写入所有css规则，设置page1背景颜色：＃000; page2背景颜色：#fff; page3背景颜色：＃00f;

body #page1{background-color:#000;}
body #page2{background-color:#fff;}
body #page3{background-color:#00f;}

但这是错误的，怎么写得正确？感谢。

Answer 1

只需删除空格（您希望指定标记名为body 且标识为page1的所有元素）：

body#page1{background-color:#000;}

Answer 2

#page1{background-color:#000;}
#page2{background-color:#fff;}
#page3{background-color:#00f;}

你也可以写

body#page1{background-color:#000;}

在这种情况下，butbody选择器是冗余的（并且更慢）。

Answer 3

您也可以通过jQuery进行操作。请参见下面的示例。

.bg-white{
background-color: #fff;
}


$(document).ready(function () {
    $('body').addClass('bg-white');
});

如何在一个css文件中为不同的页面设置不同的主体背景颜色？

3 个答案: