Django中CSS类未应用于HTML图片问题求助

我刚碰到过好几次类似的情况——给HTML里的图片加了类，但CSS里对应的样式完全没起作用，还在Chrome Sources里发现model类没被处理，大概率是几个常见的小细节没做好，咱们一步步排查：

• 先确认CSS文件有没有正确加载
  这是最容易踩的坑！你得检查HTML里引入CSS的<link>标签路径是不是写错了。比如CSS和HTML在同一目录的话，路径应该是<link rel="stylesheet" href="style.css">；要是CSS在css子文件夹里，就得写成href="css/style.css"。可以打开Chrome的Network标签，看看CSS文件的加载状态——如果是404，那就是路径错了，样式根本没进来，model类自然不会被处理。

• 检查CSS选择器的写法
  别小看拼写和符号！类选择器必须以.开头，比如正确写法是：

  .model {
    width: 200px;
    border: 1px solid #ccc;
  }
  

  要是写成model { ... }，那是在选择<model>标签，不是类。另外还要核对类名拼写，比如HTML里是class="model"，CSS里别写成.modle这种低级错误。

• 排查样式是否被覆盖
  有时候样式其实加载了，但被优先级更高的规则覆盖了。你可以打开Chrome的Elements标签，选中图片元素，看Styles面板里.model的样式是不是被划掉了。如果是，说明有更具体的选择器（比如#container img）或者行内样式把它盖过去了。这时候可以试试把选择器写得更具体，比如img.model { ... }，万不得已再用!important（尽量少用，避免后续样式混乱）。

• 确认HTML里的类名是否正确应用
  检查图片标签的class属性有没有写错，比如别写成className（那是React的写法，普通HTML用class），也别漏写字母。正确的写法应该是：

  <img src="your-image.png" class="model" alt="图片描述">
  

  如果图片是JavaScript动态生成的，还要确认类名是在元素创建时就加上的，别等元素渲染完才加，不然可能错过样式解析时机。

• 清掉浏览器缓存试试
  有时候浏览器会缓存旧的CSS文件，导致新样式不生效。你可以按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，或者在Chrome的Network标签里勾选Disable cache，再刷新看看效果。

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