建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

使用css的类名交集复合选择器 让选择元素变简单

更新时间:2016-12-26整理编辑:建站学习网阅读:0

首先先看一下基本定义:

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

 

交集选择器

“交集“复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者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 <ul class="nav">
2     <li class="first"><a href="">节目</a></li>
3     <li class="current"><a href="">合集</a></li>
4     <li><a href="">草稿</a></li>
5     <li class="last"><a href="">项目</a></li>
6 </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 <ul class="nav">;
2     <li class="first first_current"><a href="">节目</a></li>;
3     <li class="current"><a href="">合集</a></li>;
4     <li><a href="">草稿</a></li>;
5     <li class="last last_current"><a href="">项目</a></li>;
6 </ul>;
.nav .first_current a { }.nav .last_current a { }
讨论

有一种方法可以让我们不用在页面中增加像first、last这种多余的类名,那就是使用css3的样式。css3让我们选择元素变得越来越简单,实现头尾效果可用如下效果:

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

本文网址:https://www.dedexuexi.com/divcss/jc/1496.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
CSS伪类对象before和after的用法实例详解
« 上一篇2016年12月26日
CSS3 实用技巧:实现黑白图像效果示例代码
2016年12月26日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询