CSS选择全部，选择一些，但不是所有元素？

Question

我正在构建一个在任何元素上都没有边框半径的网站，而不是在我的样式表中多次使用outline: 0;我试图使用*选择器来应用{{ 1}}到一切;

outline: 0;

此CSS适用于某些元素，如输入字段，但不适用于按钮。

我正在使用bootstrap然后包含我自己的样式表。 我的样式表中没有* { -moz-appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: 0; outline: none; border-radius:0; } 的其他实例。

为什么会出现这样的圆形边框和轮廓？

Answer 1

这是由于specificity。 *选择器本身的特异性得分为0,0,0。

在Bootstrap中具有焦点的按钮具有以下选择器：

.btn:focus { ... }

它具有0,1,1的特异性得分，这意味着无论其放置在样式表的哪个位置，此声明都将覆盖*声明。

这是少数可以合理使用!important的案例之一;如果您不想这样做，则需要找到此声明不会覆盖Bootstrap的所有情况，并将这些选择器添加到您的选择器序列中：

*,
.btn:focus { ... }

Answer 2

你需要为你需要覆盖的特定事物的每个属性添加!important。我认为它会起作用......

使用更新的代码：

* {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
  outline: none!important;
  border-radius:0!important;
}