Question

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

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

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

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

我尝试了以下内容：

对每个特定宽度添加！重要。工作，但许多声称（正确的，我认为），重要的是应该避免，并且它是相当麻烦的，因为它必须添加到具有特定宽度的每个元素。
将#inputDiv添加到每个特定的选择器，即#inputDiv＃differentInput1再次，工作，并避免使用！important的问题，但仍然很麻烦，因为必须对每个元素进行。

有没有办法简单地说第一个声明中的项目不太重要，不应该覆盖任何东西？

Answer 1

没有办法做到这一点，因为它与CSS的对立方式与!important相同 - 做相反的事情就像滥用一样。您唯一的选择是依赖选择器特异性。例如，通过使用inputDiv的类而不是ID，您可以用一种不那么麻烦的方式编写它。

Answer 2

也许是解决问题的方法或回答你的问题，你可以尝试这样的事情

（http://jsfiddle.net/6aAF5/）

<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
    <div class="inputDiv"> normal</div>
</p>


<style type="text/css">
    .inputDiv {
        background-color:green;
        width:200px;
        height:20px;
    }
    .inputDiv.big {
        background-color:red;
        width:400px;
    }
    .inputDiv.middle {
        background-color:lime;
        width:100px;
    }
    .inputDiv.small {
        background-color:orange;
        width:50px;
    }
</style>

和关于！important

的小解释

！在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>

（http://jsfiddle.net/6aAF5/2/）

Answer 3

您可以通过更聪明地了解您的选择器来避免这些问题，正如其他人所指出的那样。作为最佳实践，尽可能避免使用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。

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/ http://oocss.org/

Answer 4

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

将div id="inputDiv"更改为班级名称class="inputDiv"，并将您的css选择器更改为.inputDiv。这样，您的第一个声明将不会覆盖您的诉讼声明。
使用LESS或SASS，您可以使用命名空间css规则。
最后，您可以使用jQuery覆盖（不需要的）样式，但这是不必要的开销。

PS：在CSS中描述是相当有用的，虽然它很麻烦。

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

4 个答案: