晓夏

小皇

教育信息化方案砖家

用属性选择器来选 class

浏览量:1522

 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 生成工具我不知道。不过对生成得到的代码还是得留个神,这样的问题能避免就尽量吧。


注:文章摘自 web技术研究所

神回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。