如何在页面主体中覆盖CSS类的样式信息?

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.

因此，我正在研究一个项目，该项目接受HTMLs作为输入，并将其作为输出返回。我得到的所有HTMLs都具有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?

为了更好地可视化事物，并了解我的项目进展如何，我希望输出输入的编码为我所提供的规范的HTMLs颜色。我很容易修改HTML的主体，但是很难处理样式表。我所要做的就是简单地覆盖样式表的颜色属性。这可能很麻烦，因为这只是临时使用的内部代码。我只是想要一些简单的东西。是否有一种简单的方法可以覆盖文件主体中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:最高;字体大小:13 px;字体类型:Helvetica;颜色:# 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风格= "位置:绝对;最高:432;左:422;颜色:# ff0000;" > < span class = " style21 " >与< / 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中使用特定的样式进行操作，但这行不通。(/编辑)

7 个解决方案

#1

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.

…或者在HTML的中添加一个

You can also add !important after your style values to override other styles on the same element.

您还可以添加!在您的样式值之后，在相同的元素上重写其他样式。

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.

使用我的一个建议，并针对类style21的span，而不是包含的div。在包含的div中应用的样式将不会由span继承，因为它的颜色设置在样式表中。

#2

Id's are prior to classnames.
Id在类名之前。
Tag attribue 'style=' is prior to CSS selectors.
标签属性'style=' '在CSS选择器之前。
!important word is prior to first two rules.
重要的字在前两个规则之前。
More specific CSS selectors are prior to less specific. More specific will be applied.
更具体的CSS选择器先于不那么具体的CSS选择器。将采用更具体的方法。

for example:

例如:

.divclass .spanclass is more specific than .spanclass
spanclass比.spanclass更具体
.divclass.divclass is more specific than .divclass
.divclass。divclass比。divclass更具体
#divId .spanclass has ID that's why it is more specific than .divClass .spanClass
span类有ID，这就是为什么它比。divclass .spanclass更具体的原因
<div id="someDiv" style="color:red;"> has attribute and beats #someDiv{color:blue}
< div id = " someDiv”风格= "颜色:红色;>有属性和beats #someDiv{color:blue}
style: #someDiv{color:blue!important} will be applied over attribute style="color:red"
风格:# someDiv {颜色:蓝色!重要}将应用于属性样式="color:red"

#3

you can test a color by writing the CSS inline like <div style="color:red";>...</div>

您可以通过编写CSS内联的样式来测试颜色，比如

…

。

#4

You can put CSS in the head of the HTML file, and it will take precedent over a class in an included style sheet.

您可以将CSS放在HTML文件的头部，它将在包含的样式表中优先于类。

<style>
.thing{
    color: #f00;
}
</style>

#5

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.

你试过在样式上使用重要的标志吗?重要的是让你决定哪一种风格会胜出。同样注意!重要的将会覆盖内联样式。

#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有时会让人很沮丧。

#6

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

如果可以访问头部，添加就像侯赛因给你展示的那样，还有html里的超庸俗的它可以工作，但它很丑。如果你能在你的情况下使用它，javascript是最好的方法

#7

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，并且没有覆盖导入的样式表规则，那么请使用工具(如firefox的“firebug”)仔细观察代码。它将显示应用于元素的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

瑞克

#1