2

我有一个像下面这样的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' ; 
    }

但每次它只是服用第一具尸体而已。

4

2 回答 2

1

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

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

于 2013-04-02T16:12:54.477 回答
1

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

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 仅在您打印出来时可见。它将在主站点显示中不可见。

于 2013-04-02T16:46:45.180 回答