如何使CSS僅適用於一頁而不是所有頁面

Question

我正在學習CSS，並且制作了一個小型啞站點，但是我搞砸了，並且將第二頁的邊框應用於第一頁。 這是使用邊框的部分的html

<div class="rickmorty">
    <p>The rick and morty copypasta</p>
</div>

這是它也適用於的html

<div class="box-1">
        <p>Test<br />Test again<br /></p>
</div>

這是HTML正在應用的CSS

.rickmorty p{
    /*margin:50px;
    padding:20px;*/
    border: 20px #007700 solid;
    margin:50px;
    padding:10px;
    font-weight: bold;
}
.box-1{
    background-color: #222
}
.box-1 p{
    font-weight: 80px;
}

如果還有其他問題，這是我的站點的github存儲庫

Answer 1

通過執行以下操作，將ID添加到僅在該唯一頁面上顯示的元素：

<div id="unique-box-1" class="box-1">
    <p>Test<br />Test again<br /></p>
</div>

然后在CSS中執行：

#unique-box-1
{
   color: red; //just an example
}

然后，紅色將僅應用於具有該ID的元素。 相應地調整代碼。

Answer 2

如果您希望將樣式應用於特定頁面，並且使其易於管理，則只需向該頁面唯一的正文中添加一個類引用即可。

例如

<body class="some-page-reference">
    <p>Foo bar</p>
</body>

然后在您的CSS中：

body.some-page-reference p {
    border: 1px solid red;
}

盡管這是優先考慮的問題，但我個人發現此方法比使用ID更好。

另外，如果只想在特定頁面上使用CSS，則可以將<style>標記添加到<head>並放置CSS。 但是，通常希望將CSS與HTML分開。

Answer 3

而不是類，嘗試給一個分區的ID。

id的優先級大於class。

例如：

<div id="rickmorty">
    <p>The rick and morty copypasta</p>
</div>

<div class="box-1">
        <p>Test<br />Test again<br /></p>
</div>

#rickmorty p{
    /*margin:50px;
    padding:20px;*/
    border: 20px #007700 solid;
    margin:50px;
    padding:10px;
    font-weight: bold;
}

如何使CSS僅適用於一頁而不是所有頁面

問題描述

3 個解決方案

解決方案1
1 2017-10-27 04:57:16

解決方案2
1 已采納 2017-10-27 05:00:38

解決方案3
1 2017-10-27 05:01:35

如何使CSS僅適用於一頁而不是所有頁面

問題描述

3 個解決方案

解決方案1 1 2017-10-27 04:57:16

解決方案2 1 已采納 2017-10-27 05:00:38

解決方案3 1 2017-10-27 05:01:35

解決方案1
1 2017-10-27 04:57:16

解決方案2
1 已采納 2017-10-27 05:00:38

解決方案3
1 2017-10-27 05:01:35