Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

用属性选择器来选 class?

  今天又有个小女孩在写 iconfont 的时候直接使用了属性选择器来选择 class 属性(所有 iconfont 都是 .icon-* 的形式,使用 [class^="icon-"] 来为所有 iconfont 统一指定 font-family)。其实我当年也用过类似的黑魔法,后来差点掉进自己搞出来的坑就再也不这么玩了。

  IE8 开始就支持了属性选择器,而且属性选择器不仅仅可以判断相等,还可以判断包含、头包含、尾包含,这些较高级的比较方式。于是,我们这么写也能正常工作: <meta charset="utf-8" />
<style>
[class^="red"] { color: red; }
</style>
<div class="red">虽然我是红色的</div>
<div class="x red">但我不是红色的</div>
  这个代码使用「头包含」来匹配,所以直接「class="red"」可以匹配到,而后面以非「red」开头的就无法匹配到。当然,如果使用「包含」就可以解决眼下的问题,但又会带来新的问题: <meta charset="utf-8" />
<style>
[class*="green"] { color: green; }
</style>
<div class="green">直接写绿色当然没问题</div>
<div class="yellow green">即使不写在前面也没问题</div>
<div class="yellowgreen">但是它还匹配了「黄绿色」中的「绿」</div>
  实际上「yellowgreen」表示「黄绿色」,「green」不该匹配这个。如果同时使用包含和头包含确实可以解决大部分问题,但还是比较麻烦,因为有各种特殊情况: <meta charset="utf-8" />
<style>
[class^="a-"],[class*=" a-"] { color: red; }
</style>
<div class="a-x">满足头包含</div>
<div class="x a-y">满足包含</div>
<div class="x
a-y">又不满足了 = =。。</div>
  虽然最终都可以解决,但是各种奇葩的情况如果考虑下来的话这么做会麻烦死。而且一般人根本不会考虑这么多,只为了解决眼下的问题就可能给未来埋下了一颗地雷,随时都有踩到的危险。不过后来这个小女孩解释说这段代码是某个 iconfont 生成工具生成出来的我才释怀。她们具体使用什么 iconfont 生成工具我不知道。不过对生成得到的代码还是得留个神,这样的问题能避免就尽量吧。

网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^