Question

在我的应用中，提交按钮和链接看起来完全相同。

我构建我的CSS的方式是这样的：

.button, input[type=submit]{
    //default colour
    background:grey;
}

.button-primary{
    background:green;
}

.button-danger{
    background:red;
}

如果我想在提交按钮上显示红色背景，我希望能够简单地将.button-danger类添加到其中。但遗憾的是，此操作无效，提交仍为灰色，因为input[type=submit]比.button-danger更具体。

解决这个问题的优雅方法是什么？

Answer 1

将CSS更改为：

.button, input[type=submit]:not([class^=button-]){
    background:grey;
}

这样做是将:not选择器添加到仅具有默认样式的input按钮，如果它们没有添加后续按钮类，则以button- <开头的类/ p>

More on :not

否定CSS伪类，不是（X），是一种功能符号   以简单的选择器X为参数。它匹配一个元素   没有参数表示。 X不得包含另一个   否定选择器，或任何伪元素。

非伪类的特异性是其特异性   论点。：not pseudo-class不会添加到选择器   特殊性，与其他伪类不同。

Answer 2

向选择器添加内容以使其更具体。例如：

.button-danger, input[type=submit].button-danger {
    background:red;
}

Answer 3

使用＆＃34;！important关键字＆＃34;永远是可能的。像这样的东西：

.button-danger{
    background:red !important;
}

特异性冲突：实用程序类被属性选择器覆盖

3 个答案: