Question

的test.html

<html>
<head>
    <link rel="stylesheet" type="text/html" href="external_1.css"/>
    <link rel="stylesheet" type="text/html" href="external_2.css"/>
    <link rel="stylesheet" type="text/html" href="local.css"/>
</head>
<body>
    <span class="class1 class2">Some text</span>
</body>

external_1.css

.class1 {
    color: red;
    font-weight: bold;
}

external_2.css

body .class2 {
    color: green;
    font-style: italic;
}

local.css

body .class2 {
    color: remove-property;
}

external_1.css和external_2.css文件是外部文件，我无法更改这些文件。我所能做的就是用local.css

覆盖它们

我的问题是：如何覆盖班级.class2并删除属性color，使.class1的属性应用于span最后，span上的属性将是：

{
    color: red;
    font-weight: bold;
    font-style: italic;
}

修改：我不知道.class1中的属性值是什么。也许它是动态的，我不应该在color: red;中设置local.css。

Answer 1

修改：在您的问题中进行编辑时，它会更改您所提问题的全部含义。 CSS不是一种动态语言，因此它不能自己决定，甚至不能有条件地决定选择什么和不选择什么。您需要为每个规则指定属性。

在这种情况下你应该做的事情是使用能够使用条件CSS规则的CSS预处理器，并且可以将规则嵌套在其他规则中，或者你需要通过摆脱这种令人困惑的声明方式来改变处理这些问题的肮脏方式类。

或者你最后可以使用JS来调整运行中的标记。

这是特异性的便利之处，您需要做的就是在local.css文件中编写一条规则，该规则比以前加载的CSS文件更具体。

.wrapper span.class1.class2 {
    color: red;
}

Demo

让假设你有一些包含class或id的包装元素，你需要做的就是写一个特定的选择器来覆盖您的span元素的颜色从green到red。

当然你可以使用像!important之类的东西，但我建议你不要这样使用，因为稍后它会给你更多的特殊性问题，所以保持简单并在你的local.css样式表中写一个特定的选择器。 / p>

最重要的是，你不必再担心你的样式表是如何被加载的，以及在你有一个特定的规则来覆盖基本规则之前的顺序。

最后但并非最不重要的是，这将针对所有span个元素，这两个类都嵌套在class .wrapper的{{1}}元素下，因此如果您想要更具体的简单地址您想要定位的唯一span。当然，您可以使用nth-child或nth-of-type来准确选择span。

Answer 2

你必须重新定义颜色。 CSS不是动态的，因为你说你无法控制外部css。没有选项，因此您可以使用external_1.css的.class1颜色值。如果你尝试在external_2.css之后调用external_1.css，那么还是首选external_2.css类，因为它有更深层次的元素声明......

body .class2{color:green;}

而在external_1.css中只有类声明...

.class1{color:red;}

删除overriden类中的属性

2 个答案: