将CSS规则标记为不太重要？

有没有一种方法可以将CSS规则标记为不太重要，这样即使第一个规则具有更高的优先级，它也不会覆盖后续规则？例如，假设我的CSS文件中有以下内容：

#inputDiv input[type="text"]{
    width:125px;
}

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

我的想法是，所有文本输入字段都是div“inputDiv”的子字段，它们的宽度都是125px，除了某些特定的输入可以获得其他宽度。问题是第一个声明会覆盖特定的项声明

我尝试了以下方法：

附加！对每个特定宽度都很重要。工作，但许多人声称（正确，我认为）这！应该避免使用“重要”选项，因为它必须以特定的宽度添加到每个元素中，因此相当麻烦

将#inputDiv预加到每个特定选择器，即#inputDiv#DifferentintInput1再次生效，并避免了使用时出现的问题！这很重要，但仍然很麻烦，因为必须对每个元素执行此操作

---

有没有办法简单地说第一个声明中的项目不那么重要，不应该覆盖任何内容

没有办法做到这一点，因为它与CSS的对立方式与

相同！重要的

是——做相反的事也同样是虐待。您唯一的选择是依赖选择器的特殊性。例如，您可以用一个类来代替ID来编写它，这样就不会那么麻烦了。

也许是解决您的问题或回答您的问题的一种方法，您可以尝试这样的方法

（）

BIG
中间的
小的

正常的

.inputDiv{
背景颜色：绿色；
宽度：200px；
高度：20px；
}
.inputDiv.big{
背景色：红色；
宽度：400px；
}
.inputDiv.middle{
背景色：石灰；
宽度：100px；
}
.inputDiv.small{
背景颜色：橙色；
宽度：50px；
}

而且很少解释这个问题！重要信息

!！css文件中的要点用于覆盖直接在html中定义的样式。 这意味着如果你有

<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>

<style type="text/css">

    /* this changes the styling */
    .isItImportant {
        background-color:green !important;
    }


    /* this doesn't change anything */
    .isItImportant {
        background-color:fuchsia;
    }

</style>

/*这将更改样式*/
.重要吗{
背景色：绿色！重要；
}
/*这不会改变任何事情*/
.重要吗{
背景色：紫红色；
}

---

（）

好吧，有一些方法可以实现你想要的（如果你不想做很多改变）

将div

id=“inputDiv”

更改为类名

class=“inputDiv”

，并将css选择器更改为

.inputDiv

。这样，您的第一次声明将不会覆盖您正在进行的声明

使用或，它允许您命名css规则的名称空间

最后，您可以使用jQuery覆盖（不需要的）样式，但这是不必要的开销

---

注：在CSS中进行描述性是相当有帮助的，尽管这很麻烦。

正如其他人所指出的，您可以通过更明智地使用选择器来避免这些问题。作为最佳实践，尽可能避免使用ID，并尝试对任何给定的样式集仅使用一个或两个选择器

例如，而不是：

#inputDiv input[type="text"]{
    width:125px;
}

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

您可以尝试这样做：

input[type="text"]{
    width:125px;
}

.differentInput1{
    width:25px;
}

.differentInput2{
    width:500px;
}

如果您需要更多的特殊性，类似的方法也可以：

.inputDiv input[type="text"]{
    width:125px;
}

.inputDiv .differentInput1{
    width:25px;
}

.inputDiv .differentInput2{
    width:500px;
}

不过，最终，您希望整个站点的样式保持一致，所以不需要如此精细。您可能想研究OOCSS，它非常有助于我编写更轻量级、更可伸缩的CSS

---

谢谢。我没有意识到类选择器比ID选择器低很多，尽管回想起来还是有道理的。显然，这是一个错误的断言。级联是一个重要的机制，但不是css的目标。在Scss中，您拥有！默认修饰符，因此任何内容都可以覆盖它。如果它存在于CSS库中，那么它可以提供一种默认样式，这种样式永远不会推翻您定义的样式。很明显，CSS的默认优先级分配方法是不充分的，否则我们就不会有了！重要的。因此，相对地或绝对地手动调整它将是一种更灵活的替代方法！重要提示：样式一致，是的，但字段宽度更依赖于内容，而不是站点样式。也就是说，保存姓名的文本字段需要大于保存年龄的文本字段。至少，这是我的看法。当然，你仍然需要确保事情排成一行，看起来很好：）哦，完全正确。但是，如果您开始将元素视为更大系统的一部分，而不仅仅是针对一个非常特定的问题的一个非常特定的工具，那么您可以摆脱某些特定性，转而创建可重用的类。例如，

。输入一半

，

。输入第三个

等等。而不是

#input1

和

#input2

。啊，我明白了。即使我选择了.inputWOCHAR、.inputHREECHAR等，这些仍然是广泛的类，可以在许多地方使用，而不是应用于一个特定的元素。没错！它可以减少代码中的“重复你自己”。

.inputDiv input[type="text"]{
    width:125px;
}

.inputDiv .differentInput1{
    width:25px;
}

.inputDiv .differentInput2{
    width:500px;
}