Question

所以我正在开发一个接受HTML作为输入并将它们作为输出返回的项目。我得到的所有HTML都是div和样式表中的所有文本，它们根据class属性决定每个div的样式。

为了更好地可视化事物，并了解我的项目是如何出现的，我希望将输入的HTML颜色编码输出到我给他们的规范。我很容易修改HTML的主体，但很难处理样式表。我正在寻找的只是简单地覆盖样式表的颜色属性。它可能是hacky，因为这只是临时使用的内部代码。我只想要一些有效的东西。有没有一种简单的方法可以覆盖文件正文中的CSS类的各个方面？

[编辑]我想提供一个例子来更好地解释我正在寻找的东西。我在页面顶部（我想要覆盖）的样式表示例是：

.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}

我希望改变颜色的div的一个例子是：

<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>

我的问题是我无法覆盖css中指定的颜色。正如您在上面的示例中所看到的，我正在尝试在div中的特定样式中执行此操作，但这不起作用。 [/编辑]

Answer 1

使用style属性在div上添加CSS内联，例如：

<div style="color:red"> ... </div>

...或者创建自己的样式表并在现有样式表之后引用它，然后样式表应该优先。

...或者在您的HTML的<style>中添加<head>元素和您需要的CSS，这将优先于外部样式表。

您还可以在样式值后添加!important以覆盖同一元素上的其他样式。

<强>更新

使用上面的一个建议并定位类style21的范围，而不是包含div。您在包含div上应用的样式将不会被跨度继承，因为它的颜色在样式表中设置。

Answer 2

我的名字在类名之前。
Tag attribue'style ='优先于CSS选择器。
!important字在前两个规则之前。
更具体的CSS选择器之前不太具体。将更具体地应用。

例如：

.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"

Answer 3

您可以通过编写内联CSS来测试颜色，例如<div style="color:red";>...</div>

Answer 4

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

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

Answer 5

你试过在样式上使用！important标志吗？！important允许您决定哪种风格会胜出。另请注意！important也会覆盖内联样式。

#example p {
    color: blue !important;
}
...
#example p {
    color: red;
}

另外几个建议：

在当前内部添加跨度。最内在的将赢得胜利。虽然这可能会非常难看。

<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>

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>

希望这会有所帮助。 CSS有时会非常令人沮丧。

Answer 6

如果你可以访问头部添加<style> /*...some style */ </style> 侯赛因向你展示的方式和超级hacky <style> </style> 在HTML中它会工作，但它的丑陋。或javascript它是最好的方式，如果你可以在你的情况下使用它

Answer 7

以利，重要的是要记住，在css特异性方面有很长的路要走。如果你的内联css使用！important并且没有覆盖导入的样式表规则，那么使用firefox的'firebug'等工具仔细观察代码。它将显示应用于元素的CSS。如果存在语法错误，firebug将在警告面板中显示它已抛出声明。

还要记住，一般来说，id比一个类更具体而不是一个元素。

希望有所帮助。

-Rick

如何覆盖页面正文中的CSS类的样式信息？

7 个答案: