为什么改变CSS类名打破了样式？

问题描述

这是一个真正的头部scratcher我。

我使用Zurb Foundation with 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 = size：0.8em> x< / small> 240 
< / span> 
< / div> 
< / div> 
  

产生我想要的：

img src =https://i.stack.imgur.com/dLXhm.pngalt =正确呈现的网页>

but！ em>如果我在这两个文件中改变类 ad 到 banner-ad 我得到这个不受欢迎的结果： / p>

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

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等，所以如果我没有孤立这个够，让我知道。

解决方案

感谢@MrLister -

问题是AdBlockPlus，阻塞了元素 - 查看过滤器列表显然，我认为 banner-ad 的许多其他变体都会被广告拦截器自动过滤。

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

1. Change in the_styles.scss : .ad { --> .banner-ad {
2. Change in the_page.html : class="ad small-centered columns" --> class="banner-ad small-centered columns"
3. Recompile SASS
4. 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.

解决方案

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.

这篇关于为什么改变CSS类名打破了样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！