Question

我有这个：

input[type=button]{ a LOT of stuff } /* File 1 */
.btn {what I actually want to use} /* Twitter bootstrap */

<input type="button" class="btn">

但输入从File1而不是TB获取样式。如何忽略第一个样式？

编辑以获得更多解释：我要添加的类来自Twitter Bootstrap CSS。我不想改变地方.btn及其变体（.btn-primary，.btn：hover，.btn-primary：hover），有近200个，每个都有很多项。在每一行中添加！important是我想要避免的。我想告诉我的HTML，整个文件很重要。

编辑＃2： Maaaaaaaaaybe我找到答案：http://thingsinjars.com/post/360/scoped-style/也许，因为我现在要测试它。

Answer 1

CSS是分层的 - 请记住，最明确定义的规则是使用的。

IE：如果您的按钮在几个div中，那么您可以定义包括父层次结构的样式，并且由于更具体，这是应用的规则。

.btn {
   // base rules
   width: 80px;
   color: black;
}

.parent .block .user-form .btn {
   // my rules defined here will override anything set in .btn, and also pick up the base styles
   width: 100px;

}

因此，.parent，.block等中的.btn宽度为100px，但基本规则中定义的颜色为黑色。

Answer 2

除了danp的回答，ID的优先级高于class。因此，您可以尝试将其更改为：

<input type="button" id="btn">

#btn {
/*css rules*/
}

Answer 3

加强层次结构。 e.g：

div .btn {}

body .btn {}

.container .btn {}

等

请记住，您仍然必须覆盖之前已设置的任何您根本不想要的规则。

希望有所帮助：）

Answer 4

你试过了吗？ .btn {color：#ff0000！important; }

删除标记名称设置的CSS

4 个答案: