>

使用CSS的类名交集复合选择器

- 编辑:正版管家婆马报彩图 -

使用CSS的类名交集复合选择器

率先先看一下着力概念:

  复合选用器正是七个或三个主导选取器,通过分裂格局连接而成的选用器,首要富含“交集”采取器、“并集”选拔器、“后代”选择器。 

  交集选用器

  “交集”复合选择器是由八个选择器直接连接构成,其结果是选中二者分别成分范围的犬牙相错。当中第贰个必需是符号采纳器,第4个必需是项目选用器也许ID选用器。那四个接纳器之间不能有空格,必得一连书写。

  注意当中第二个必得是标记选取器,如p.class1,但不常拜望到.class1.class2,即2个都以类选择器,在任何浏览器中是同意出现这种状态的,但IE6不相配。如下表:

  三个类选取器的“交集”复合选用器浏览器接济表:

  复合选取器的利用

  那是个差不离的tab菜单:

图片 1  如下是html代码:

<ul class="nav">
<li class="first"><a href="">节目</a></li>
<li class="current"><a href="">合集</a></li>
<li><a href="">草稿</a></li>
<li class="last"><a href="">项目</a></li>
</ul>

  为了贯彻上述效果,我们在css中可以使用复合选拔器。

  选择<a> 标签

  能够用八个抉择器来定义全数的 <a> 元素, 如下:

.nav li a {}

图片 2  选料第多个 <a> 元素

  为了充实列表左上角的圆角功能, 你供给采用第三个 <a> 成分. 那足以用如下的采用器来完毕:

.nav li.first a {}

图片 3  选拔最终三个 <a> 元素

  为了扩充列表右上角的圆角功能, 你必要接纳最后贰个 <a> 成分. 那足以用如下的选用器来完成:

.nav li.last a {}

图片 4  出色呈现当前页

  通过改换tab的颜色来展现页面是当前页,大家能够在类名中步入current这几个类名来促成,如下:

.nav li.current a {}

图片 5  为眼下页面包车型大巴左右上角加多圆角样式

  未来有个难点,第一个和末段贰个抉择被选中的时候拐角是直角的。为了达到选中时候是当前页的样式,拐角也是圆角效果,我们要求给特地给它们写特殊的接纳器,由于今后我们的类名都在同一个因素中,所以我们最后可以用混合复合选取器来达成,如下:

.nav .first.current a {}
.nav .last.current a {}

图片 6  结果

  那看起来很简短,是或不是?如同上边提到的,现在的难题是:IE5和IE6都不帮助类名交集复合接纳器。IE5和IE6在辨明类名时候只会识别最终一个类名。效果如下:

.nav .first.current a {}
.nav .last.current a {}

  IE5和IE6把那2个选用器分析为:

.topnav .currents a {}
.topnav .current a {}

  那代表那一个浏览器会给持有的当前页都增加圆角作用,效果如下:

图片 7

  在IE7下也是没难题的,表达IE7也补助类名交集复合选择器。

  化解的方式

  可以给第叁个和结尾三个li单独加叁个current的体裁,但如此扩展了js的承担。

<ul class="nav">;
<li class="first first_current"><a href="">节目</a></li>;
<li class="current"><a href="">合集</a></li>;
<li><a href="">草稿</a></li>;
<li class="last last_current"><a href="">项目</a></li>;
</ul>; .nav .first_current a {}
.nav .last_current a {}

  讨论

  有一种格局可以让大家不用在页面中增添像first、last这种多余的类名,那正是行使css3的样式。css3让大家选用成分变得特别简单,实现头尾效果可用如下效果:

li:first-of-type a {}
li:last-of-type a {} 3 1

来源:

复合接纳器正是七个或多个大旨选拔器,通过区别格局连接而成的选用器,主要包蕴混合选用器、并集选择器、后...

本文由web前端发布,转载请注明来源:使用CSS的类名交集复合选择器