Question

我正在尝试通过设置select标记的 width 属性来更改应用程序中下拉列表的宽度。但是我提供的宽度没有任何影响，因为它是在select标签的全局样式表文件中预先指定的。我不想更改全局CSS文件。但是有可能在不改变全局CSS的情况下重新调整下拉列表的大小吗？

Answer 1

我不同意使用！重要只有在真正需要时才会使用，因为在长期运行中，它会给维护代码的人带来问题。

1）创建一个单独的css文件＆amp;并将你的规则放在那里。

2）在bootstrap include之后包含它。

3）确保具体了解您需要更改的html元素的路径

例如，如果指定了

<!DOCTYPE html>
<html>
    <head>
        <style>
            div#test table#sometable td#sometd{
              color: #000;
            } 

            td#sometd{
              color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <table id="sometable">
                <tr>
                    <td id="sometd">
                        hello
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

尽管您有td#sometd{color:#fff;}

，但单元格内的'hello'文本仍为黑色

这是因为先前的css规则比第二个规则更具体，因此您的首要规则可能只是：

div#test table#sometable td#sometd{
    color: #fff;
}

你应该使用！明智地重要＆amp;作为最后的手段，如果你想覆盖其他！重要规则或内联css。

Answer 2

避免使用！重要，尝试覆盖特异性。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

您需要在定义后添加!important：

.dropDownCustom 
{
   width: 100px !important;
}

如何覆盖全局Bootstrap样式表？

3 个答案: