覆盖为 HTML 标记设置的 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12810227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override CSS styles set for HTML tag
提问by Michael Kniskern
My page is referencing an CSS style sheet with the definition:
我的页面正在引用具有以下定义的 CSS 样式表：
html {background-color:#FFFFFF;background-image:url('../images/Background.png');background-repeat:repeat-x; }
How do I overwrite the background-imageelement at the page level? I need to overwrite the setting for just one page in my application.
如何background-image在页面级别覆盖元素？我只需要覆盖应用程序中一页的设置。
回答by Kevin Bowersox
Add a class to the html element and then use some inline styling to override the external stylesheet's styling. You could also place the inline style in an external style sheet which would be best practice.
向 html 元素添加一个类，然后使用一些内联样式来覆盖外部样式表的样式。您还可以将内联样式放在外部样式表中，这是最佳做法。
<html class="myHtmlTag">
<head>
<link href="externalStyle.css" rel="stylesheet"/>
<style>
html.myHtmlTag{
background: none !important;
background-image:none !important;
}
</style>
</head>
<body></body>
</html>
回答by Joel
If you are targeting only the htmltag without any other selectors than you can simply include another htmlstyle AFTER the main css. Per CSS specificity - they will only have the value of 1 tag each (no ids, no classes) - so the latter one will style the element.
如果您只针对html标签而没有任何其他选择器，那么您可以html在主 css 之后简单地包含另一种样式。每个 CSS 特性 - 它们每个只有 1 个标签的值（没有 id，没有类） - 所以后一个将设置元素的样式。
<html>
<head>
<link rel="stylesheet" href="main.css" />
<!-- anywhere from here down you can include a style to over ride html -->
Here's a quick demo:
这是一个快速演示：
html {background-color:#000;background-image:url('http://lxmpro.com/cms/wp-content/uploads/2012/01/site-background-pattern-07.jpeg');background-repeat:repeat-x; }
/* second reference to html tag overrides the first */
html {background-image:url('http://www.noupe.com/wp-content/uploads/2009/10/wallpaper-pattern.jpg');}
Working Demo - http://jsfiddle.net/K68D3/
工作演示 - http://jsfiddle.net/K68D3/
回答by storm_m2138
Basic inline style override of class background color:
类背景颜色的基本内联样式覆盖：
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city" style="background-color: tomato;">London</h2>
<p>London is the capital of England.</p>
</body>
</html>
回答by udidu
Use the !importantproperty on the backgroundbackground-imagestyle like so:
!important在backgroundbackground-image样式上使用属性，如下所示：
html{background-color:#000000 !important;background-image:url('your/image/path') !important;...}
回答by TestShoot
Can you apply a class to the body tag? IE:
你可以将一个类应用到 body 标签上吗？IE：
<body class="home">
<body class="articlepage">
Otherwise, you technically could use jQuery, assuming you have access to drop code on the page to do the function but are locked out
否则，您在技术上可以使用 jQuery，假设您有权在页面上放置代码来执行该功能但被锁定
<script>$("body").addClass("home");</script>
----or------
- - 或者 - - -
<script>$("body").addClass("articlepage");</script>
These allow you to do classes:
这些允许您上课：
body.home {background-image:url(homebg.jpg);}
body.articlepage {background-image:url(articlebg.jpg);}
