CSS通配符元素名称选择

Question

有没有办法在CSS中使用通配符按名称选择元素？

例如，使用以下元素：

<my-element-one></my-element-one>
<my-element-two></my-element-two>
<div></div>

我是否只能选择以＆＃39; my-element＆＃39;？开头的每一个？例如：

my-element-* {color: red;}

Answer 1

没有。只有属性选择器在CSS中具有任何类型的通配符语法。

听起来您的XML应用程序设计可能会更好地使用更少的类型并使用属性来区分它们的子集。

Answer 2

正如昆汀所说，这些选择器不可用。一个简单的解决方案是将元素的名称也作为类名：

<my-element-one class="my-element-one"></my-element-one>
<my-element-two class="my-element-two"></my-element-two>
<div></div>

这样您可以使用属性通配符语法，例如

 [class^="my-element-"]

会定位所有具有以my-element-开头的类的元素。

您还可以使用$=（以...结尾），*=（包含）等，然后检查

  

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 3

您始终可以向元素添加公共类和一个或多个其他类的集合。

你可以把你所有元素共同的风格放在公共类中。 css然后根据需要使用附加的css类覆盖它。

例如：

<div class="my-element my-element-one"></div>
<div class="my-element my-element-two"></div>
<div></div>

的CSS：

div.my-element
{
     height: 100px;
     width : 100px;
}

div.my-element-one
{
     color: red;
}

div.my-element-two
{
     color: blue;
}