为什么更改 CSS 类名会破坏样式？答案

【问题标题】：Why does changing a CSS class name break the styles?为什么更改 CSS 类名会破坏样式？
【发布时间】：2014-09-10 05:21:03
【问题描述】：

这对我来说真是令人头疼。

我将 Zurb Foundation 与 SASS 和 Django 开发服务器一起使用。问题是这样的：

我有一个带有一些选择器的 SCSS 文件，它们可以按需要工作；但是，如果我在 SCSS 和 HTML 中更改类的 name，则该类下的元素将不再呈现。

// the_styles.scss
.ad-box {
   @include panel();
   border: none;

   .ad {
      width: 728px;
      height: 240px;
      border: 1px solid #00f;
   }
}

<!-- the_page.html -->
<div class="large-12 columns ad-box ">
   <div class="ad small-centered columns">
      <span style="font-size:21px;color:#000000;width:728px;height:728px;line-height:240px">728
         <small style="font-size:0.8em">x</small> 240
      </span>
   </div>
</div>

生产我想要的东西：

但是！如果我将两个文件中的 ad 类更改为 banner-ad，我会得到这个不受欢迎的结果：

更具体地说，当我“在两个文件中更改类”时，我的意思是我

更改 the_styles.scss : .ad { --> .banner-ad {
更改the_page.html : class="ad small-centered columns" --> class="banner-ad small-centered columns"
重新编译 SASS
在 Chrome 中重新加载页面

此外，我还尝试在执行上述步骤之前关闭开发服务器，并在 #4 之前启动它，但行为没有明显变化。

将类名改回ad 之后会再次起作用。

我知道这里有很多中介，比如 Django 模板、重新编译 SASS 的结构任务等，所以如果我没有充分隔离这些，请告诉我。事实上，我完全感到困惑。

【问题讨论】：

在 Chrome 中将ad 更改为banner-ad 后，您是否检查了开发工具以检查生成的 CSS ？我认为你的 HTML 使用了 banner-ad 类，但你的 CSS 被困在 ad 上（无论是因为在 Chrome 缓存中还是因为你的编译脚本没有更新）
尝试清除缓存并重新加载页面..
您有广告拦截器吗？名称“banner-ad”很可能触发与“ad”不同的屏蔽规则。
@MrLister，干得好！就是这样——在网站上禁用 ABP，重新加载，banner-ad 类按预期呈现。

标签： css django sass zurb-foundation

【解决方案1】：

感谢@MrLister--

问题在于 AdBlockPlus，它阻止了该元素 -- 查看过滤器列表 here 很明显，banner-ad 和我想到的许多其他变体都被广告拦截器自动过滤了。

【讨论】：