html - 选择名称以CSS中特定字符串开头的所有元素

Question

我想选择所有以“my-element”开头的 html 元素。

例如:

my-element-1 {

    background-color: red;
    ...
}
my-element-2 {
    background-color: red;
    ...
}
my-element-3 {
    background-color: red;
    ...
}

会是这样的:

[tag*="my-element"] {
    background-color: red;
    ...
}

选择这样的类时该语法有效:

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

我该怎么做？

Answer 1

不，没有像“通配符元素”这样的 CSS 选择器来根据部分元素名称检索元素。

您可以:

A) 使用类名或任何其他属性，因为可以使用带有正则表达式的选择器访问元素属性。 (正如你的问题。)

my-element[my-attribute] { … }

B) 使用像 SCSS 这样的 CSS 预处理器来生成这样的元素名称的列表:

@for $i from 1 through 3 {
  my-element-#{$i} {
    background-color: red;
  }
}

C) 或者只是将它们一个接一个地写在 CSS 中，用逗号分隔:(这与在您的问题中独立编写每个规则相同。)

my-element-1,
my-element-2,
my-element-3 {
    background-color: red;
}