Html 如何从页面正文中的 CSS 类覆盖样式信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5382254/
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
How Can I Override Style Info from a CSS Class in the Body of a Page?
提问by Eli
So I'm working on a project that accepts HTMLs as inputs and returns them as outputs. All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute.
所以我正在开发一个接受 HTML 作为输入并将它们作为输出返回的项目。我作为输入获得的所有 HTML 都在 div 和样式表中包含所有文本，它们根据 class 属性规定每个 div 的样式。
To better visualize things, and to see how my project is coming along, I would love to output the input HTMLs color coded to specifications I give them. It's really easy for me to modify the body of the HTML, but difficult to deal with the style sheet. All I'm looking for is something simple to override the color property of the style sheet. It can be hacky, as this is just internal code for temporary use. I just want something simple that works. Is there an easy way to override aspects of CSS classes in the body of a file?
为了更好地可视化事物，并了解我的项目进展如何，我很想将输入的 HTML 颜色编码为我给它们的规范。对我来说，修改 HTML 的 body 真的很容易，但是处理样式表却很难。我正在寻找的只是简单地覆盖样式表的颜色属性。它可能是 hacky，因为这只是临时使用的内部代码。我只是想要一些简单有效的东西。有没有一种简单的方法可以覆盖文件正文中 CSS 类的各个方面？
[EDIT] I want to provide an example to better explain what I'm looking for. An example of the style sheets I have at the top of my page (that I want to override) is:
[编辑] 我想提供一个例子来更好地解释我在找什么。我的页面顶部的样式表示例（我想覆盖）是：
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
An example of a div whose color I'd like to change is:
我想更改其颜色的 div 示例是：
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
My problem is that I can't override the color specified in the css. As you can see in the above example, I'm trying to do it in the specific style within the div, but that isn't working. [/EDIT]
我的问题是我无法覆盖 css 中指定的颜色。正如您在上面的示例中看到的那样，我正在尝试以 div 中的特定样式执行此操作，但这不起作用。[/编辑]
回答by Graham
Either use the style attribute to add CSS inline on your divs, e.g.:
要么使用 style 属性在您的 div 上添加 CSS 内联，例如：
<div style="color:red"> ... </div>
... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
...或创建您自己的样式表并在现有样式表之后引用它，那么您的样式表应该优先。
... or add a <style>element in the <head>of your HTML with the CSS you need, this will take precedence over an external style sheet.
...或使用您需要的 CSS 在 HTML 中添加一个<style>元素<head>，这将优先于外部样式表。
You can also add !importantafter your style values to override other styles on the same element.
您还可以!important在样式值之后添加以覆盖同一元素上的其他样式。
Update
更新
Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.
使用我上面的建议之一，并针对 class style21 的范围，而不是包含 div。您在包含 div 上应用的样式不会被跨度继承，因为它的颜色是在样式表中设置的。
回答by Johnner
- Id's are prior to classnames.
- Tag attribue 'style=' is prior to CSS selectors.
!importantword is prior to first two rules.- More specific CSS selectors are prior to less specific. More specific will be applied.
- Id 在类名之前。
- 标签属性 'style=' 在 CSS 选择器之前。
!importantword 优先于前两个规则。- 更具体的 CSS 选择器优先于不太具体的选择器。将应用更具体的。
for example:
例如：
.divclass .spanclassis more specific than.spanclass.divclass.divclassis more specific than.divclass#divId .spanclasshas ID that's why it is more specific than.divClass .spanClass<div id="someDiv" style="color:red;">has attribute and beats#someDiv{color:blue}- style:
#someDiv{color:blue!important}will be applied over attributestyle="color:red"
.divclass .spanclass比.spanclass.divclass.divclass比.divclass#divId .spanclass有 ID 这就是为什么它比.divClass .spanClass<div id="someDiv" style="color:red;">有属性和节拍#someDiv{color:blue}- 样式：
#someDiv{color:blue!important}将应用于属性style="color:red"
回答by Hussein
you can test a color by writing the CSS inline like <div style="color:red";>...</div>
您可以通过编写内联 CSS 来测试颜色，例如 <div style="color:red";>...</div>
回答by Matthew Rapati
You can put CSS in the headof the HTML file, and it will take precedent over a class in an included style sheet.
您可以将 CSS 放在headHTML 文件的 中，它会优先于包含的样式表中的类。
<style>
.thing{
color: #f00;
}
</style>
回答by Bryan Weaver
Have you tried using the !important flag on the style? !important allows you to decide which style will win out. Also note !important will override inline styles as well.
您是否尝试过在样式上使用 !important 标志？!important 允许您决定哪种风格会胜出。另请注意 !important 也会覆盖内联样式。
#example p {
color: blue !important;
}
...
#example p {
color: red;
}
Another couple suggestions:
另一对夫妇的建议：
Add a span inside of the current. The inner most will win out. Although this could get pretty ugly.
在当前的内部添加一个跨度。最内在的人会胜出。虽然这可能会变得非常难看。
<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>
jQuery is also an option. The jQuery library will inject the style attribute in the targeted element.
jQuery 也是一种选择。jQuery 库将在目标元素中注入 style 属性。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").css("color", "#ff0000");
});
</script>
Hope this helps. CSS can be pretty frustrating at times.
希望这可以帮助。CSS 有时会非常令人沮丧。
回答by webLacky3rdClass
if you can access the head add<style>
/*...some style */
</style>the way Hussein showed you
and the ultra hacky
<style>
</style>in the html it will work but its ugly.
or javascript it the best way if you can use it in you case
如果您可以访问头部，请添加<style>
/*...some style */
</style>侯赛因向您展示的方式
以及<style>
</style>html 中的超级黑客
，它会起作用，但它很难看。或 javascript 它是最好的方式，如果你可以在你的情况下使用它
回答by dolbysurnd
Eli, it is important to remember that in css specificity goes a long way. If your inline css is using the !important and isn't overriding the imported stylesheet rules then closely observe the code using a tool such as 'firebug' for firefox. It will show you the css being applied to your element. If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration.
Eli，重要的是要记住，在 css 中，特殊性有很长的路要走。如果您的内联 css 正在使用 !important 并且没有覆盖导入的样式表规则，那么请使用诸如 'firebug' for firefox 之类的工具密切观察代码。它将向您显示应用于元素的 css。如果存在语法错误，firebug 将在警告面板中显示它已抛出声明。
Also remember that in general an id is more specific than a class is more specific than an element.
还请记住，通常 id 比类更具体，而不是元素更具体。
Hope that helps.
希望有帮助。
-Rick
-瑞克
