css - 为什么更改 CSS 类名会破坏样式？

Question

这个真的让我头疼。

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

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

// 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 我会得到这个不希望的结果:

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

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

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

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

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

Answer 1

感谢@MrLister--

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