CSS：類名選擇器-名稱以

Question

我有兩種不同類型的類名。 第一個命名為color-* 。 例如：

color-red
color-blue
color-green

我也有類名hover-color-*

hover-color-red
hover-color-blue
hover-color-green

我正在嘗試為默認的超鏈接顏色創建一個CSS規則：

a:not([class*='color-']) {
    color: #3498db;
}

很好，但是如果存在這樣的超鏈接：

<a href="#" class="hover-color-green">Link</a>

在這種情況下，超鏈接應保留默認的超鏈接顏色，並且僅應覆蓋懸停顏色，但是由於規則class*='color-'以及我僅指定了懸停顏色的事實，因此未給超鏈接指定正常的顏色。顏色（＃3498db）。

有什么方法可以更新此規則，以便僅在類名以color-開頭時才觸發？ （因此， ANYTHING-color-都不適用）

Answer 1

您正在使用的選擇器*=匹配包含該字符串的任何屬性。

相反，您需要^= ，它匹配以該字符串開頭的任何屬性。

結合使用效果最佳：

a[class^='color-'], a[class*=' color-'] { ... }

請參閱CSS屬性選擇器上的MDN頁面以及其他SO答案 。

Answer 2

用另一種方式考慮一下。 不要更改類名中不包含顏色的任何內容。 首先將a更改為所需的內容：

a {
    color: yellow;
}

a:hover {
    color: orange;
}

那么您可以使用以下方法覆蓋它們：

a.color-red{...}
a.color-blue{...}
a.color-green{...}
a.hover-color-red{...}
a.hover-color-blue{...}
a.hover-color-green{...}

現在您可以像這樣使用它：

<a ... class="color-red hover-color-blue">test</a>

不要復雜。 它可以完美工作，並且將來您可以更輕松地維護樣式。

如果您想在任何地方使用它，只需選擇它：

.color-red{...}
.color-blue{...}
.color-green{...}
.hover-color-red{...}
.hover-color-blue{...}
.hover-color-green{...}

在這里查看示例：

 a { color: gray; } a:hover { color: orange; } .color-red, .color-red-hover:hover { color: red; } .color-blue, .color-blue-hover:hover { color: blue; } 

 <a class="color-red color-blue-hover" href="#">Red</a> <a class="color-blue color-red-hover" href="#">Blue</a> <a href="#">Normal</a>