为什么更改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，我会收到这种不良结果：

更具体地说，当我在两个文件中更改类＆＃34;我是说我

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

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

将班级名称更改回ad会再次有效。

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

Answer 1

感谢@MrLister -

问题是AdBlockPlus，它阻止了元素 - 查看过滤器列表here很明显{I}我想到的任何其他变体都会被广告拦截器自动过滤掉。