如何忽略css文件中的类前缀

Question

我在Chrome控制台中看到了一些例如div/按钮样式，如下所示：

/* Chrome browser styles tab */
.ItemClass1-0-3-171.ItemClass2-0-3-173: {
background-color: "red"
}

如何在CSS中定义一个新样式，忽略类编号？因为它可以是页面上其他div/按钮的不同数字。。

/* CSS file */
.ItemClass1.ItemClass2 {
background-color: "blue"
}

Answer 1

您可以使用两个属性包含选择器。

[class*="ItemClass1"][class*="ItemClass2"] {
background-color: red;
}

<p class="ItemClass1-0-3-171 ItemClass2-0-3-173">foo</p>

但请记住，这也将选择类为fooItemClass2的元素。

Answer 2

您可以使用以值开头的属性选择器来拾取以ItemClass开头的任何内容。

注意：此解决方案假定ItemClass是第一个类名，并且不考虑元素是否同时具有这两个类。出于这些原因，Sven的回答可能更适合您的需求。

[class^='ItemClass'] {
background-color: blue;
padding: 4rem;
}

<div class="ItemClass1-0-3-171.ItemClass2-0-3-173"></div>