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

【问题标题】：how to ignore class prefix in css file如何忽略css文件中的类前缀
【发布时间】：2021-06-11 19:06:54
【问题描述】：

我看到了一些，例如Chrome 控制台中的 div/button 样式如下：

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

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

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

【问题讨论】：

标签： css sass

【解决方案1】：

您可以为此使用两个attribute contains selectors。

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

&lt;p class="ItemClass1-0-3-171 ItemClass2-0-3-173"&gt;foo&lt;/p&gt;

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

【讨论】：

【解决方案2】：

您可以使用带有starts-with 值的attribute selector 来获取以ItemClass 开头的任何内容。

注意：此解决方案假定 ItemClass 是 first 类名，并且不考虑元素是否具有这两个类。由于这些原因，Sven's answer 可能更适合您的需求。

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

&lt;div class="ItemClass1-0-3-171.ItemClass2-0-3-173"&gt;&lt;/div&gt;

【讨论】：