Question

我有一个像下面这样的CSS，

@media screen {
    .page{}
}
@media print {
    .page {}
}


body
{
    background-color:#ffffe0;
    margin-left:20px;
    margin-top:50px;
    margin-bottom:50px;
}

select
{
    font-size     : 24pt; font-family: 'MS UI Gothic' ; 
}

我想使用相同的CSS，但只应更改正文中的值。值是

body
{
    background-color:#ffffe0;
    margin-left:5px;
    margin-top:0px;
    margin-bottom:0px;
}

我尝试添加这样的新类。这是正确的吗？或者我们如何为不同的类使用两个不同的身体。请有人告诉我。

我试过这个

@media screen {
        .page{}
    }
    @media print {
        .page {}
    }


    body
    {
        background-color:#ffffe0;
        margin-left:20px;
        margin-top:50px;
        margin-bottom:50px;
    }

    select
    {
        font-size     : 24pt; font-family: 'MS UI Gothic' ; 
    }

@media screen2 {
        .page2{}
    }
    @media print2 {
        .page2 {}
    }


    body
    {
        background-color:#ffffe0;
        margin-left:20px;
        margin-top:50px;
        margin-bottom:50px;
    }

    select
    {
        font-size     : 24pt; font-family: 'MS UI Gothic' ; 
    }

但每次只拍摄第一个身体。

Answer 1

就body选择器而言，它们都适用于同一个元素，因此只能使用一个元素。如果要更改正文样式，请更改现有选择器的属性。如果要根据某些逻辑在两者之间切换，请为<body>元素指定一个ID或类，然后将其添加到选择器中，以便您可以选择应用哪一个。

另外，screen2和print2不是有效的媒体选择器。

Answer 2

好的，这是第一位。正如@Adrian所说，一个页面只能有一个body元素。其次，@ media和@print分别对应普通屏幕（如台式机，笔记本电脑等）和打印（例如，当您单击打印按钮时）。所以，你需要做的很简单。将body标记放在所有其他媒体查询之外。

body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}

@media screen {
.page{}

rest of your styles and classes...

}
@media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}

rest of your styles and classes...

}
and so on...

或

这样做......

@media screen {
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
.page{}
}
@media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
}

但是，您应该注意，只有在打印时才能看到打印类型css。它不会在主站点显示屏上显示。

在同一个CSS文件中使用两个主体

2 个答案: