CSS类样式未生效求助：制作类似Facebook的社交卡片遇问题

你的问题出在HTML代码里的引号使用错误——你用了中文全角引号（”）来包裹类名，而浏览器只能识别英文半角引号（"），所以CSS里定义的类选择器无法匹配到HTML元素，自然样式不生效；而内联样式直接写在元素上不受引号格式影响，所以能正常工作。

修复步骤： #

• 将HTML中所有包裹类名的中文全角引号（”）替换为英文半角引号（"）

修复后的HTML代码：

<div class="card">
  <div class="image-section">
    <img class="image" src="images/photo.png">
  </div>
  <div class="info-section">
    <p class="name">Roland</p>
    <p class="tag">@roland00</p>
    <p class="gender">Male</p>
  </div>
  <div class="button-section">
    <button class="btn" type="button">Follow</button>
  </div>
</div>

替换完成后，CSS里的.card、.image-section等类选择器就能正确匹配对应的HTML元素，样式会正常生效。

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