使用CSS的类名交集复合选择器
首先先看一下基本定义:
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器、“并集”选择器、“后代”选择器。
交集选择器
“交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。
注意其中第一个必须是标记选择器,如p.class1,但有时候会看到.class1.class2,即2个都是类选择器,在其他浏览器中是允许出现这种情况的,但IE6不兼容。如下表:
两个类选择器的“交集”复合选择器浏览器支持表:
复合选择器的使用
这是个简单的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 {} 3 1
来源:http://www.codesocang.com/news/Webqianduan/2014/0511/7604.html
使用CSS的类名交集复合选择器的更多相关文章
- 使用css的类名交集复合选择器 《转》
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...
- (2)css的复合选择器与特性
css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复 ...
- CSS复合选择器和div盒子模型
一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...
- CSS导入方式和六种选择器
1.css的导入方式 1.1 行内嵌式 1.2 内部方式 1.2.1含义: css代码写在<head>的<style>标签中 1.2.2 优点 方便在同页面中修改样式 1.2. ...
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
- css复合选择器的权重
选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...
- css学习_css复合选择器
css复合选择器 a.交集选择器 (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
随机推荐
- 关于键盘冲突那点事(3键冲突/7键冲突/PS2/USB的各种原理)
转自关于键盘冲突那点事(3键冲突/7键冲突/PS2/USB的各种原理) 最近闲得无聊,正好看到有人发帖提问,于是就来详细说说所谓键位冲突和无冲突的各种原理--基本上这也是个老生常谈的话题了,但相关的技 ...
- SEH and C++ Exceptions,自定义CSeException
Description of CSeException CSeException class is based on CException class provided by MFC. I overw ...
- 远程仓库版本回退方法 good
1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的版本到远程分支,怎么回退远程分支 ...
- php composer
对于现代语言而言,包管理器基本上是标配.Java有Maven,Python有pip,Ruby有gem,Nodejs有npm.PHP的则是PEAR,不过PEAR坑不少: 依赖处理容易出问题 配置非常复杂 ...
- C# Winform 实现自定义半透明loading加载遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...
- CentOS升级内核的方法
升级前的内核版本为:2.6.32-431.el6.x86_64 升级后的内核版本为:3.10.101-1.el6.elrepo.x86_64 升级方法: 1.导入key rpm --import ht ...
- 《使用wxWidgets进行跨平台程序开发》chap09——布局一个对话框
///////////////////////////////////////////////////////////////////////////// // Name: personalrecor ...
- 多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客
多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客 多IDC数据分布--MySQL多机房部署
- express4.x 路由中间件
路由中间件必须通过app挂载到对应的路由上,如: var express = require('express'); var router = express.Router(); var app = ...
- Java集合类详解
集合类说明及区别Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap ...