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

Question

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

10

我希望选择所有以“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;
}

我该如何做到这一点？

- João Pedro Sá Medeiros

1

这是不可能的。 - BenM

11

我认为大多数人会给所有相关元素添加一个公共类，并将其用作选择器。 - thirtydot

Thirtydot 差不多就是说到点子上了，添加一个你想要使用 !important 来覆盖它的休眠类。 - DataCure

1

我想知道您考虑了哪些HTML标签。 - Thomas Scheffer

@JoãoPedroSáMedeiros 你只想用CSS实现吗？还是你愿意尝试JavaScript？ - TylerH

显示剩余5条评论

2个回答

2

如果您想创建自己的HTML标签，那么它不是HTML5格式。不太清楚“元素”部分在您的代码中应该如何工作，但可以使用以下选择器：

div[id^="my-element"]{//code}

这是一个通过相同开头部分选择元素的选择器。引用自：W3C。例如：

<html>
<head>
<style>
div[id^="my-element"]{
//code}</style>
</head>
<body>
<div id="my-element-1">Content</div>
<div id="my-element-2">Content</div>
</body>
</html>

希望这有所帮助。

- PStarczewski

我建议添加一个解释，说明你的CSS选择器是如何起作用的，以改进这个答案。 - TylerH

我正在使用Angular创建组件。 - João Pedro Sá Medeiros

@TylerH 已完成，希望现在更好了。 - PStarczewski

@JoãoPedroSáMedeiros，我从未使用过angular，所以我不知道这些选择器如何工作。没有angular标签，所以我假设它是干净的HTML和CSS。我的错。 - PStarczewski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- feeela · Accepted Answer

没有类似于“通配元素”这样的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;
}