CSS通配符元素名称选择答案

【问题标题】：CSS Wildcard element name selectionCSS通配符元素名称选择
【发布时间】：2015-05-25 20:57:53
【问题描述】：

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

例如，使用这些元素：

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

我可以只选择以“我的元素”开头的每一个吗？比如这样：

my-element-* {color: red;}

【问题讨论】：

您可以使用 javascript 脚本执行此操作。一旦你用脚本选择了它们，你就可以给它们一个公共类（例如）并使用该类，甚至直接使用它们的样式属性。这可能是您的起点：stackoverflow.com/questions/4275071/…

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

正如 Quentin 已经说过的，这样的选择器是不可用的。一个简单的解决方案是将元素的名称也作为类名：

<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

【讨论】：

【解决方案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;
}

【讨论】：