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;
}

Answer 2

如果要创建自己的html标签，则不是HTML5格式。真的不知道这个“元素”部分应该如何在您的代码中起作用，但是您可以使用：

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

这是一个选择器，它从同一开始部分选择元素。引用： W3C

E [foo ^ =“ bar”]一个E元素，其“ foo”属性值完全以字符串“ bar”开头

例如：

<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>

希望有帮助。

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

2 个答案: