Question

例如：

你有这个：

<style type="text/css">
.myrule {
  font-weight:bold;
}
</style>
<div class="myrule">
  This text will bold but 
</div>


<style type="text/css">
.myrule {
  font-weight:normal; /* This code will affect the original .myrule */
}
</style>

我需要知道是否可以像这个例子一样“锁定”CSS规则：

<style type="text/css">
.myrule:locked {
  color:yellow;
}
</style>
<div class="myrule">
   This text will yellow always!!!!!!!
</div>

<style type="text/css">
.myrule {
  color:red;
}
</style>

Answer 1

不一定。您可以使用!important运算符为CSS规则添加极端权重，该规则将覆盖其他任何内容。但是，另一个更具体的规则也具有!important运算符仍将覆盖它。

你最好的选择不是试图“锁定”CSS规则，而是要确保规则的选择器总是比其他规则更具体。 ID选择器是支配特异性的一种很好的方法，你将以这种方式遇到更少的问题。

Answer 2

试试这个：

.myrule {
  font-weight:bold !important;
}

Answer 3

如果可以为DIV标签定义ID，例如

<div class="myrule" id="firstdiv">
   This text will yellow always!!!!!!!
</div>

然后您可以指定您的ID特定CSS规则，例如

<style type="text/css">
#firstdiv .myrule {
  color:yellow;
}
</style>

Answer 4

我认为css解释因浏览器而异。如果你想覆盖css优先级，我认为你需要使用javascript来明确说明你的意图。

是否可以控制CSS规则以允许其他规则更改它？

4 个答案: