当前位置: > 计算机专业 > CSS >

使用CSS的类名交集复合选择器_前端开发工程师

编辑: 时间:2017-12-19 10:34:47 来源:ag娱乐平台手机版新华电脑学校 点击:

  首先先看一下基本定义:

  复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器、“并集”选择器、“后代”选择器。

  交集选择器

  “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。

  注意其中第一个必须是标记选择器,如p.class1,但有时候会看到.class1.class2,即2个都是类选择器,在其他浏览器中是允许出现这种情况的,但IE6不兼容。如下表:

  两个类选择器的“交集”复合选择器浏览器支撑表:

Mac: Safari 4.0 支撑
Mac: Chrome 5.0 支撑
Mac: FireFox 3.6 支撑
Mac: Opera 10 支撑
Win: FireFox 3.6 支撑
Win: Opera 10 支撑
Win: IE6 不支撑
Win: IE7 支撑
Win: IE8 支撑

  复合选择器的使用

  这是个简单的tab菜单:

  如下是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 {}

  选择第一个 <a> 元素

  为了增加列表左上角的圆角效果, 你需要选择第一个 <a> 元素. 这可以用如下的选择器来实现:

.nav li.first a {}

  选择最后一个 <a> 元素

  为了增加列表右上角的圆角效果, 你需要选择最后一个 <a> 元素. 这可以用如下的选择器来实现:

.nav li.last a {}

  突出显示当前页

  通过改变tab的颜色来显示页面是当前页,大家可以在类名中加入current这个类名来实现,如下:

.nav li.current a {}

  为当前页面的左右上角添加圆角样式

  现在有个问题,第一个和最后一个选项被选中的时候拐角是直角的。为了达到选中时候是当前页的样式,拐角也是圆角效果,大家需要给专门给它们写特殊的选择器,由于现在大家的类名都在同一个元素中,所以大家最终可以用交集复合选择器来实现,如下:

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

  结果

  这看上去很简单,是不是?就像上面提到的,现在的问题是:IE5和IE6都不支撑类名交集复合选择器。IE5和IE6在识别类名时候只会识别最后一个类名。效果如下:

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

  IE5和IE6把这2个选择器解析为:

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

  这意味着这些浏览器会给所有的当前页都增加圆角效果,效果如下:

  在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 {}
TAG标签: 前端开发 CSS

转载请注明源自ag娱乐平台手机版新华电脑App学校

★www.sxxhce.cn★

------分隔线----------------------------

专业课程

同类热门文章

新濠天地娱乐手机版 新濠天地 新濠电玩城手机版 新濠天地娱乐手机版 新濠电玩城官网下载 新濠天地娱乐官网3559 新豪天地880988.com 新濠天地娱乐官网15969
ca88亚洲城真人娱乐ca88亚洲城真人娱乐|资讯中心|精彩视频|专业设置|学校环境|就业保障|名师风采|网站地图|

ag娱乐平台手机版新华电脑学校

地址:ag娱乐平台手机版省西安市北稍门振华北路4号(西安市第十中学东侧)邮编:710014电话:029-82519999

高新校区地址:西安市雁塔区鱼斗路259号

陕ICP备11004055号-3www.sxxhce.cn

ag娱乐平台手机版新华电脑App学校Copyright@2006-2016 www.sxxhce.cn.All Rights Reserved.

声明:任何企业或个人不得以任何商业目的复制或传递本网站所载述的商标、文字、影像及图形图象,分享转载需注明来源本网站

Copyright©2006-2016 Sxxhce.Cn All Rights Reserved.Optimized for 1024x768 to Firefox,MS-IE6 IE7.   版权所有:北京朗杰科技有限企业

XML 地图 | Sitemap 地图