Html 如何让css只应用于一个页面而不是所有页面_Html_Css

Html 如何让css只应用于一个页面而不是所有页面

html css

Html 如何让css只应用于一个页面而不是所有页面,html,css,Html,Css,我正在学习css，我制作了一个小的愚蠢的网站，但不知怎么搞砸了，它将第二页的边框应用到了第一页。下面是使用边框的部件的html <div class="rickmorty"> <p>The rick and morty copypasta</p> </div> 如果是其他内容则通过以下操作向仅出现在该唯一页面上的元素添加一个ID： <div id="unique-box-1" class="box-1"> <p

我正在学习css，我制作了一个小的愚蠢的网站，但不知怎么搞砸了，它将第二页的边框应用到了第一页。下面是使用边框的部件的html

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

如果是其他内容

则通过以下操作向仅出现在该唯一页面上的元素添加一个

ID

：

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

然后，红色将仅应用于ID为

的元素。相应地调整代码。
通过执行以下操作向仅出现在该唯一页面上的元素添加ID
：
<div id="unique-box-1" class="box-1">
    <p>Test<br />Test again<br /></p>
</div>

然后，红色将仅应用于ID为的元素。相应地调整代码。
如果您希望将样式应用于特定页面，并使其易于管理，请简单地向页面特有的正文添加类引用
例如
虽然这是一个偏好的问题，但我个人认为这种方法比使用ID更好
或者，如果您只想在特定页面上使用CSS，您可以将
标记添加到
并放置CSS。但是，通常需要将CSS与HTML分开。
如果您希望将样式应用于特定页面，并使其易于管理，请向页面特有的正文添加一个类引用
例如
虽然这是一个偏好的问题，但我个人认为这种方法比使用ID更好
或者，如果您只想在特定页面上使用CSS，您可以将
标记添加到
并放置CSS。但是，通常需要将CSS与HTML分开。
尝试为div指定id，而不是类
id的优先级大于类
例：

瑞克和莫蒂的意大利面
测试
再次测试

#立克莫蒂{
/*利润率：50像素；
填充：20px*/
边框：20px#007700实心；
利润率：50像素；
填充：10px；
字体大小：粗体；
}
尝试为div指定id，而不是类
id的优先级大于类
例：

瑞克和莫蒂的意大利面
测试
再次测试

#立克莫蒂{
/*利润率：50像素；
填充：20px*/
边框：20px#007700实心；
利润率：50像素；
填充：10px；
字体大小：粗体；
}
div.box-1
是否有div.rickmorty
作为祖先？您必须给出不同的类名。如果您不想在第二页中使用css链接，那么无需在HTMLDoesdiv.box-1
中使用div.rickmorty作为祖先？您必须提供不同的类名。如果你不想在第二页，所以不需要给css链接的HTML
<div id="unique-box-1" class="box-1">
    <p>Test<br />Test again<br /></p>
</div>

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

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

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

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