Question

如果我想格式化具有给定类的元素，有时（非常罕见）我使用：

.beigeButton[class~="enabledButton"] {

}

如果我只想在不包含给定字符串的情况下为元素赋予属性，该怎么办？这不起作用：

.beigeButton[class!="enabledButton"] {

}

我该怎么做？

Answer 1

使用:not：

.beigeButton:not(.enabledButton)

Answer 2

一般情况下，你会设置基本按钮的样式并用其他类覆盖样式，不管怎么样：

.beigeButton {
background-color: beige;
cursor: pointer;
}

.beigeButton.disabled {
background-color: grey;
cursor: not-allowed;
}

.beigeButton.enabled {
background-color: green; //or just keep the basic color
}

您还可以定义一个更为通用的“禁用课程”。可以通过这种方式应用于任何其他元素：

.disabled {
background-color: red;
pointer: not-allowed;
}

按下课程＆＃39;禁用＆＃39;将获得灰色背景，但规则.beigeButton.disabled更具体地作为一般.disabled规则。任何其他元素（或者如果更具体的规则不存在或适用）将获得红色背景颜色。

编辑：要回答您的初始问题，您也可以反过来调整样式，例如marcinjuraszek已经描述过：

.beigeButton:not(.enabled) {
background-color: grey;
cursor: not-allowed;
}

注意：请检查浏览器兼容性here

希望这会有所帮助：）

如何根据缺少CSS类来应用格式？

2 个答案: