使用css的类名交集复合选择器 《转》
2018-06-24 01:41:52来源:未知 阅读 ()
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器、“并集”选择器、“后代”选择器。
交集选择器
“交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者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代码:
1
2
3
4
5
6
|
<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个选择器解析为:
.nav .current a { } .nav .current a { }
这意味着这些浏览器会给所有的当前页都增加圆角效果,效果如下:
在IE7下也是没问题的,说明IE7也支持类名交集复合选择器。
解决的办法
可以给第一个和最后一个li单独加一个current的样式,但这样增加了js的负担。
1
2
3
4
5
6
|
<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 { }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash