25

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

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

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

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

我尝试了以下方法：

  1. 将 !important 附加到每个特定宽度。有效，但许多人声称（我认为是正确的） !important 应该避免，而且它相当麻烦，因为它必须添加到具有特定宽度的每个元素中。
  2. 将#inputDiv 添加到每个特定的选择器，即#inputDiv #differentInput1 再次起作用，并避免了使用！important 的问题，但仍然很麻烦，因为必须对每个元素执行此操作。

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

4

4 回答 4

16

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

于 2013-06-19T20:07:58.733 回答
5

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

( 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 文件中的 !important 用于覆盖直接在 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/ )

于 2013-06-19T20:17:24.110 回答
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/

于 2013-06-19T20:31:32.353 回答
1

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

  1. 将您的 div 更改id="inputDiv"为类名class="inputDiv"，并将您的 css 选择器更改为.inputDiv. 这样，您的第一个声明将不会覆盖您的程序声明。

  2. 使用LESS或SASS，它们允许您命名 css 规则。

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

PS：虽然很麻烦，但在 CSS 中进行描述还是很有帮助的。

于 2013-06-19T20:17:47.693 回答