反引号模板字符串中类无法被CSS样式化的解决方法咨询

核心问题排查与修复 #

1. 修正模板字符串中的HTML实体转义错误 #

你当前的模板字符串里用了<、"这类HTML实体，浏览器会把它们解析成纯文本内容，而非实际的HTML标签和属性，导致类名根本没被识别，CSS自然无法生效。直接把实体替换成原生HTML语法：

function Home() {
  let displayCards = Galeyre.map((item) => {
    return `
        <div class="card_container">
            <div class="card">
                <div class="face-side">
                    <img alt="Question mark" /> <!-- 补全img标签，你之前漏了标签名 -->
                </div>
                <div class="back-side">
                    <img alt="${item.name} flag icon" /> <!-- 同样补全img标签 -->
                </div>
            </div>
        </div>`;
  }).join("");

  // 必须用innerHTML插入，才能解析成DOM元素
  document.getElementById("card-wrapper").innerHTML = displayCards;
}

2. 确保正确插入HTML到DOM #

如果用innerText或textContent插入内容，浏览器会把所有HTML代码当成纯文本显示，只有innerHTML能将字符串解析为DOM元素，让类名被CSS识别。

3. 检查CSS本身的问题 #

• 核对类名拼写：比如CSS里写的是.card-container（横杠），但HTML里是card_container（下划线），这类拼写错误会直接导致样式失效。
• 确认CSS已正确引入：检查页面的<link>标签或<style>标签是否加载正常，路径是否正确。
• 排查样式优先级：如果你的样式被其他高优先级规则（比如ID选择器、行内样式）覆盖，可以在浏览器开发者工具的Elements面板中查看该元素的样式，看是否有被划掉的规则，针对性调整选择器优先级。

4. 如果是React环境，改用JSX写法 #

如果这是React组件，不要用拼接HTML字符串的方式，React推荐用JSX，这样样式（尤其是模块化CSS）才能正常生效：

function Home() {
  return (
    <div id="card-wrapper">
      {Galeyre.map((item) => (
        <div className="card_container" key={item.id}> {/* React中用className代替class */}
          <div className="card">
            <div className="face-side">
              <img alt="Question mark" />
            </div>
            <div className="back-side">
              <img alt={`${item.name} flag icon`} />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

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