覆盖Bootstrap的!important属性

Question

5

我想在下拉列表获得焦点时消除轮廓线。请参考以下图片：

我尝试使用!important覆盖Bootstrap，但根本不起作用。突然间在开发工具中看到了这个：

Bootstrap也使用!important标签，所以我无法覆盖它。我可以使用id设置焦点轮廓为0，但是我的网站上有很多下拉列表。有解决这种情况的方法吗？

.bootstrap-select .dropdown-toggle:focus{
   outline: none!important;
}

- Janath

2个回答

3

在你的HTML中，先加载bootstrap-select.min.css，再加载style.css。

换句话说，先加载bootstrap-select.min.css，然后再加载style.css。

在同一规则内，后定义的属性将覆盖先前定义的属性。

- josephting

2

这并不总是可行的事情。我也遇到了类似的问题，尝试覆盖bootstrap类，但我的样式表在bootstrap CDN之后加载，但仍无效。 - Michael Alexander

在某些情况下，比如不同的选择器，后加载的样式表仍可能被具有更高特异性的选择器覆盖。请参阅特异性-MDN。 - josephting

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mostafa Ghanbari · Accepted Answer

你的 style.css 文件在 Bootstrap css 文件加载之前。然而，为了覆盖 Bootstrap 样式，你必须在 bootstrap-select.min.css 文件之后加载你的 style.css 文件。