Why does changing a CSS class name break the styles?

问题

This one is a real head-scratcher for me.

I'm using Zurb Foundation with SASS, and a Django dev server. The issue is this:

I have a SCSS file with some selectors, and they work as desired; however, if I change the name of the class in both the SCSS and the HTML, the elements under that class no longer render.

// 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>

produces what I want:

but! if I change, in both files, the class ad to banner-ad I get this undesirable result:

More specifically, when I "change, in both files, the class" I mean that I

Change in the_styles.scss : .ad { --> .banner-ad {
Change in the_page.html : class="ad small-centered columns" --> class="banner-ad small-centered columns"
Recompile SASS
reload the page in Chrome

Furthermore, I have also tried shutting down the development server before doing the steps above, and starting it up before #4, to no noticeable change in behavior.

Changing the class name back to ad does then work again.

I do understand that there are a number of intermediaries going on here, like Django templates, the fabric task to recompile SASS, etc. so if I haven't isolated this enough, do let me know. As it is, I am completely baffled.

回答1:

Thanks to @MrLister--

The problem is AdBlockPlus, which was blocking the element--Looking at the filter list here it's apparent that banner-ad any many other variations I thought of were automatically filtered by the ad blocker.

来源：https://stackoverflow.com/questions/24835697/why-does-changing-a-css-class-name-break-the-styles

标签

css

django

Sass

zurb-foundation