CSS：类名称选择器名称以开头 [英] CSS: Class name selector- name starts with

问题描述

我有两种不同类型的名称。第一个被命名为 color - * 。例如：

  color-red 
 color-blue 
 color-green 
  code> 

我也有类名 hover-color - *

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

我试图为默认的超链接颜色制作css规则：

  a：not（[class * ='color-']）{
 color：＃3498db; 
} 
  

这很好，但是如果超链接像这样存在：

 < a href =＃class =hover-color-green>连结< / a> 
  

在这个例子中，超链接应该保持默认的超链接颜色，只有悬停颜色应该被覆盖，但是由于规则 class * ='color - '，而且我只指定了悬停颜色，所以超链接没有被赋予正常颜色（＃3498db）。 p>



是否有任何方法更新此规则，以便只在类名以 color - 开头时触发？ （因此， ANYTHING-color - 不适用） 使用 * = 的选择器与包含字符串的任何属性匹配。

相反，您希望 ^ = ，它与任何开头属性匹配。

组合效果最佳：

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

请参阅关于CSS属性选择器的MDN页面和
这个其他的答案。

I have two different type of class names. The first are named color-*. For example:

color-red
color-blue
color-green

I also have class names hover-color-*

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

I am attempting to make a css rule for the default hyperlink color:

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

This is fine, however if a hyperlink exists like this:

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

In this instance, the hyperlink should keep the default hyperlink color and only the hover color should be overridden, however because of the rule class*='color-' and the fact I only specified the hover color, the hyperlink is not given a normal color (#3498db).

Is there any way to update this rule so that it only triggers if the class name begins with color-? (so, ANYTHING-color- would not apply)

解决方案

The selector you are using *= matches any attribute containing that string.

Instead, you want ^=, which matches any attribute beginning with that string.

A combination would work best:

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

See MDN page on CSS attribute selectors and this other SO answer.

这篇关于CSS：类名称选择器名称以开头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！