如何修改所有以content结尾的CSS类的样式？

方案一：纯CSS实现（无需JavaScript） #

使用CSS的属性结尾匹配选择器 [class$="content"]，可以精准选中所有class属性值以content结尾的元素，直接设置内边距样式：

/* 匹配所有class以"content"结尾的元素 */
[class$="content"] {
  padding: 12px 16px; /* 自定义内边距，可根据需求调整 */
}

这个选择器会自动匹配所有符合条件的元素——哪怕元素有多个class（比如class="box blue-content"），只要class属性的最终结尾是content就会生效，完全不需要提前知道完整的class名称。

方案二：JavaScript动态修改（适合需要条件触发的场景） #

如果需要根据业务逻辑动态调整内边距（比如按钮点击、状态变化时修改），可以用document.querySelectorAll选中目标元素，再遍历设置样式：

全局场景（非React组件内直接执行）

// 选中所有符合条件的元素
const targetElements = document.querySelectorAll('[class$="content"]');

// 遍历设置内边距
targetElements.forEach(el => {
  el.style.padding = '8px'; // 按需修改值
});

React组件内使用

在React组件中，建议在useEffect钩子中执行（确保DOM渲染完成后再操作）：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const contentElements = document.querySelectorAll('[class$="content"]');
    contentElements.forEach(el => {
      el.style.padding = '10px 20px';
    });
  }, []); // 空依赖数组：仅组件挂载时执行一次

  return (
    <div>
      {/* 你的组件内容 */}
      <div className="blue-content">...</div>
      <div className="big-content">...</div>
    </div>
  );
}

如果需要根据状态动态调整，只需把状态变量加入useEffect的依赖数组，状态变化时就会重新执行样式设置逻辑。

内容的提问来源于stack exchange，提问作者Fuzz