如何更改以相同名称结尾的多个类的样式？答案

【问题标题】：How can I change the style of several classes that end with the same name?如何更改以相同名称结尾的多个类的样式？
【发布时间】：2022-08-16 21:56:25
【问题描述】：

我在不同的 React 组件中有一系列元素，我想“动态地”修改填充。让我们假设我有以下内容：

<div className=\"blue-content\">
<div className=\"menu-black\">
<div className=\"big-content\">
<div className=\"red-content\">

*我并不总是知道完整的类名

我如何通过 CSS 或 Javascript 更改所有以 \"content\" 结尾的样式？

【解决方案1】：

CSS方式：

只需在 [class$='-content'] 后面的开头添加使用的属性名称

就像下面的这个例子，我使用了一个 div。

div[class$='-content']{
  color:red;
}

<div class="red-content"> test </div>
<div class="x-content"> test1 </div>
<div class="y-content"> test2 </div>
<div class="z-content"> test3 </div>

【讨论】：

【解决方案2】：

您可以使用属性选择器。尝试：

div[class$='-content'] {
  background-color: skyblue;
}

div {
  padding: 10px;
  border: 1px solid black;
}

<div class="blue-content"></div>
<div class="menu-black"></div>
<div class="big-content"></div>
<div class="red-content"></div>

【讨论】：