CSS规则不适用于HTML元素

Question

我做了一个，怎么称呼：剥离我的问题版本。

http://jsfiddle.net/TRNCFRMCN/hxjp9jL9/1/

HTML

<div class="navigation">
  <div class="navigationRelative">
    <span data-href="about.1.0.0" data-alt="About" title="About" class="ueber link">    </span>
    <span data-href="artikel.1.0.1" data-alt="Artikel" title="Artikel" class="artikel link"></span>
    <span data-href="person.1.0.2" data-alt="Person" title="Person" class="person link">    </span>
  </div>    
</div>

CSS

.navigation {
  position: absolute;
  left: 172.446px;
  bottom: 0;
  width: 84px;
  height: 33px;
  background:green;
}
.navigationRelative {
  position: relative;
  width: 240px;
  height: 80px; 
}
.navigation span {
  width: 80px;
  height: 80px;
  position: absolute; 
  z-index: 1;
  cursor: pointer;
  background-size: 100%;
}

未应用.navigation CSS。

这是什么？

我需要它来订购。

提示：错误似乎不在HTML中 - ＆gt; .navigation span规则已应用！？！

如果你能帮助我，那绝对是moshpit。

Answer 1

我不知道你做了什么，但.navigation之后的空间不是正常空间。如果用新的类型空格替换它，它就可以工作，否则不行。

.navigation {   /* removed previous "space" and typed space in */
  position: absolute;
  left: 172.446px;
  bottom: 0;
  width: 84px;
  height: 33px;
  background:green;
}

当原始空间应该是正常空间（0x20）时，它是一个非中断空间（0xa0）。请参阅ASCII table之前的参考资料。

Answer 2

您在CSS班级名称和左括号之间使用了non-breaking space。用常规空间替换它，一切正常。

Answer 3

牢不可破的空间&nbsp导致您的css出现问题，如下图