css - 删除标签名称设置的 CSS

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，但颜色为黑色，如基本规则中所定义。