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;
}

如果是其他内容here is my github repository of the site

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

如果您希望将样式应用于特定页面 - 并使其易于管理 - 只需向页面特有的正文添加类引用。

E.g。

<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

而不是类，尝试为div提供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 个答案: