在相同的CSS文件

使用兩個身體我有一個CSS像下面，在相同的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' ; 
    }

但每一次也只不過是第一主體服用。

來源

2013-04-02 Cyril

至於body選擇器，它們都適用於相同的元素，因此只能使用一個。如果您想更改正文的樣式，請更改現有選擇器的屬性。如果您想根據某種邏輯在兩者之間切換，請給<body>元素一個ID或類，並將其添加到選擇器，以便您可以選擇應用哪一個。

此外，screen2和print2不是有效的媒體選擇器。

來源

2013-04-02 16:12:54 Adrian

有點困惑。我正嘗試使用類名稱頁面訪問此CSS。如果你不介意，請你詳細說明一下嗎？ – Cyril

你是什麼意思的「班名頁」？你正在使用''？如果是這樣，你可以把你的css改成'body.page {'以僅僅影響'class = page'帶有'body'的頁面。 – Adrian

通過在javascript中添加正文解決 – Cyril

好的，這是第一位。正如@Adrian所說，你只能有一個頁面的body元素。其次，@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-02 16:46:45

在相同的CSS文件

回答

相關問題