删除由标签名称设置的 CSS答案

【问题标题】：Remove CSS set by tag name删除由标签名称设置的 CSS
【发布时间】：2012-05-10 16:35:44
【问题描述】：

我有这个：

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： Maaaaaaaaybe 我找到了答案：http://thingsinjars.com/post/360/scoped-style/ 只是也许，因为我现在要测试它。

【问题讨论】：

标签： css tags twitter-bootstrap

【解决方案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 将是 100 像素宽，但具有基本规则中定义的黑色。

【讨论】：

【解决方案2】：

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

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

#btn {
/*css rules*/
}

【讨论】：

不能这样做，因为 btn 来自 twitter bootstrap，我想在同一页面的多个按钮中使用 .btn。

【解决方案3】：

加强层次结构。例如：

div .btn {}

body .btn {}

.container .btn {}

等等

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

希望有帮助:)

【讨论】：

【解决方案4】：

您是否尝试过： .btn { 颜色: #ff0000 !important; }

【讨论】：

!important 是“最后的手段”，如果有的话，要非常非常谨慎地使用。
我同意，但这将有助于确定问题所在。我不建议带着这个去生产。谢谢。
我想过。问题是 .btn 位于 twitter bootstrap css 中，并且有 190 多个地方定义了它（.btn、.btn-primary 等）。我想避免更改此文件。