如何使CSS仅适用于一页而不是所有页面
[英]How do I get my css to apply only to one page and not all pages
问题描述
I'm working on learning css and I made a small dumb site, but I screwed up somehow and it's applying the border of the second page to the first page. 
我正在学习CSS，并且制作了一个小型哑站点，但是我搞砸了，并且将第二页的边框应用于第一页。 Here's the html of the part using the border 这是使用边框的部分的html
<div class="rickmorty">
<p>The rick and morty copypasta</p>
</div>
Here is the html it is also applying to 这是它也适用于的html
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
And here is the css the html is applying 这是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;
}
If it's something else here is my github repository of the site 如果还有其他问题， 这是我的站点的github存储库
3 个解决方案
解决方案1
1 2017-10-27 04:57:16
Add an ID to the elements that appear only on that unique page by doing something like: 通过执行以下操作，将ID添加到仅在该唯一页面上显示的元素：
<div id="unique-box-1" class="box-1">
<p>Test<br />Test again<br /></p>
</div>
Then in CSS do: 然后在CSS中执行：
#unique-box-1
{
color: red; //just an example
}
Then the red color will be applied only to the element with that ID . 然后，红色将仅应用于具有该ID的元素。 Adjust the code accordingly. 相应地调整代码。
解决方案2
1 已采纳 2017-10-27 05:00:38
If you wish to apply styles to specific pages — and make it easy to manage — simple add a class reference to the body that is unique to the page. 如果您希望将样式应用于特定页面，并且使其易于管理，则只需向该页面唯一的正文中添加一个类引用即可。
Eg 例如
<body class="some-page-reference">
<p>Foo bar</p>
</body>
Then in your CSS: 然后在您的CSS中：
body.some-page-reference p {
border: 1px solid red;
}
Although it's a matter of preference I personally find this method better than using IDs. 尽管这是优先考虑的问题，但我个人发现此方法比使用ID更好。
Alternatively, if you want to use CSS on a specific page only you can add <style> tags to the <head> and put your CSS. 另外，如果只想在特定页面上使用CSS，则可以将<style>标记添加到<head>并放置CSS。 However, it is often desirable to keep CSS separate from the HTML. 但是，通常希望将CSS与HTML分开。
解决方案3
1 2017-10-27 05:01:35
Instead of class, try to give id for an div.. 而不是类，尝试给一个分区的ID。
The priority of id is greater than class. id的优先级大于class。
Ex: 例如：
<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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.