如何使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