为什么引导程序覆盖内部样式？答案

【问题标题】：Why bootstrap override internal style?为什么引导程序覆盖内部样式？
【发布时间】：2015-10-04 20:24:29
【问题描述】：

这是我在 html 页面中的 Head 标签

<head>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <style>
        input[type=text] {
            font-size: 18px;
            height: auto;
        }
        select {
            font-size: 18px;
            height: auto;
        }
    </style>
</head>

bootstrap 覆盖我的选择元素的内联样式，是什么原因？

【问题讨论】：

首先，这不是“内联样式”——该术语是指通过style 属性直接在元素上设置的样式。而且您的样式可能会被覆盖，因为引导程序使用了更具体的选择器。
你应该添加 HTML 元素的 Bootstrap 覆盖样式！或创建 JSFiddle
@CBroe 这是一个口头错误，我更正了。
尝试将!important添加到您的风格中，例如：font-size: 18px !important;
@SimoneNigro：这是一个相当糟糕的建议。 !important 会导致问题，如果您稍后需要在更具体的上下文中覆盖这些样式。

标签： html twitter-bootstrap css

【解决方案1】：

引导程序中的规则.form-control 比您的input 更重要只需使用.form-control 并添加新样式

【讨论】：

【解决方案2】：

在引导选择中使用其他元素（如输入、文本区域等）进行样式化。

.form-control 类名更具体，优先于选择元素，这就是为什么最好使用.form-control 类来覆盖引导程序默认样式。

使用.form-control 代替选择元素。将此类添加到您的CSS。

【讨论】：