原文:http://www.chinaz.com/web/2012/1017/278553.shtml

相信大家都对CSS选择符都不陌生,选择符包含:元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符。在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率。

今天就为大家介绍下选择符中的关系选择符,“关系”这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率。不然在CSS中有你受的,哈哈。关系选择符有四个类别:包含选择符、子选择符、相邻选择符、兄弟选择符。接下来为大家一一介绍。在这里特别的说明一下,我们平常中最常用的的是包含选择符,为什么我们都习惯用这个呢?因为在IE6浏览器中,只支持包含选择符,其他的均不支持。在以往(现在有点改观了)IE6是浏览器市场的主角,用户覆盖率极高,所以对于那些IE6所不支持的,也必然造成我们很少用到甚至根本不用的现象。但是记得在一篇文章看到,现在HTML5/CSS3是未来的一个趋势,而HTML5/CSS3将会重视起以前那些被我们误认为没有什么用的标签的运用。也许在某一天,IE6真正的功成身退了,不再折腾考验我们了,那些我们误以为没有用的标签语法将会掀起一次CSS效率大革命。哈哈,纯属个人幻想。请勿当成珍珠一样真。

包含选择符(E F)

语法:

E F{ sRules }

说明:

选择所有被E元素包含的F元素。

示例:

输出结果图片:

输出结果说明:ul li表示在ul下面所有的li都会有作用,只要是属于ul的li都会起作用。

子选择符(E>F)

语法:

E>F{ sRules }

说明:

选择所有作为E元素的子元素F。

示例:

输出结果图片:

输出结果说明: .test>li>a 表示对在选择器test下面的 li 标签下面 a 标签起作用。只有属于这个关系的才会起作用,大家可以从上面的例子看到,有些 li 元素的下面还有 ul li 的选择符,但是却不会起到作用。由此可见,子选择符比包含选择符提供了更精细的控制。结合上面的两个例子我们也可以得出:包含选择符的深度和广度超过子对象选择符;而子对象选择符的针对性和唯一性比包含选择符强。这也就是包含选择符和子选择符的区别,这是一个比较容易混淆的地方。

相邻选择符(E+F)

语法:

E+F{ sRules }

说明:

选择紧贴在E元素之后F元素。

示例:

输出结果图片:

输出结果说明: p+p 表示只有在 p元素之后紧连接着另一个p元素,才会对第二个p元素开始起到作用。也就是只有在结构中的后面两个p元素起到作用,而假如在 结构中,却不会对任何标签取到作用,因为p标签没有形成两个以上(包括两个)的连续。

兄弟选择符(E~F)

语法:

E~F{ sRules }

说明:

选择E元素后面的所有兄弟元素F。

输出结果图片:

输出结果说明: p~p 表示只要出现第一个p元素之后,接下来只要有p元素都会起到作用的(也就是在一个结构中,第二次出现p元素就会起到作用)。假如选择符设置成 p~p~p 那么同理,会在第三个(包含第三个)p元素开始签到作用。

注:建议大家可以对以上的示例随意的更改里面的样式选择符,然后去测试看看输出的结果。只有自己动手去实验了,才能记的更加的牢固。

通过上面的举例说明,大家都已经了解了各种关系选择符的用法。那么我们在日常中,怎么去运用这些选择符呢?那就得看大家的聪明才智了。或许在以后会写一些利用这些选择符来制作的一些效果,和大家一起来研究探讨。合理的有效利用,不但可以提高我们的代码质量而且还大大的提高我们的效率。

注:相关网站建设技巧阅读请移步到建站教程频道。

CSS选择符详解之关系选择符篇的更多相关文章

  1. [转]文件IO详解(二)---文件描述符(fd)和inode号的关系

    原文:https://www.cnblogs.com/frank-yxs/p/5925563.html 文件IO详解(二)---文件描述符(fd)和inode号的关系 ---------------- ...

  2. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. 详解java访问修饰符

    详解java访问修饰符 为了防止初学者看到因为专业的术语而感觉晦涩难懂,我接下来尽量用生动比喻的说法来解释!首先第一点,我们来讲讲什么叫修饰符!看看这个名称,想想他的意思.修饰符!修饰符!,就是用来修 ...

  5. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  6. Java之Static静态修饰符详解

    Java之Static静态修饰符详解 Java之Static静态修饰符详解 一.特点 1.随着类的加载而加载,随着类的消失而消失,生命周期最长 2.优先于对象存在 3.被所有类的对象共享 4.可以直接 ...

  7. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  8. Android Gradle manifestPlaceholders 占位符详解

    Android Gradle manifestPlaceholders 占位符详解 在实际项目中,AndroidManifest里十几个地方的值是需要动态的改变(生成apk文件的时候).如果每次去改也 ...

  9. abstract关键字、final关键字、static关键字、访问修饰符详解

     abstract关键字.final关键字.static关键字.访问修饰符详解 abstract关键字: final关键字: static关键字: 访问修饰符:

随机推荐

  1. 老司机学新平台 - Xamarin Forms开发框架二探 (Prism vs MvvmCross)

    在上一篇Xamarin开发环境及开发框架初探中,曾简单提到MvvmCross这个Xamarin下的开发框架.最近又评估了一些别的,发现老牌Mvvm框架Prism现在也支持Xamarin Forms了, ...

  2. 集合和String

    集合 Collection 接口 |-List 接口 |-LinkedList 类 |-ArrayList 类 |-Set 接口 |-HashSet 类 |-TreeSet 类 |-LinkedHas ...

  3. HDU 4858 分块

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 题意:中文题面 思路:来自此博客 对每个点定义两个值:val,sum,val记录自己的特征值,s ...

  4. 利用增量备份恢复因归档丢失造成的DG gap

    故障现象:data guard归档出现gap,悲剧的是丢失的归档在主库上被rman备份时删除了,丢失的归档大约有20几个,数据库大小约2T,如果重建DG将非常耗时间,因此决定利用增量备份的方式恢复DG ...

  5. Starting MySQL.The server quit without updating PID file (xxxx.pid).[FAILED]

    mysql无法正常启动,查看日志报如下异常 --07T01::.929615Z [ERROR] Fatal error: Please read "Security" sectio ...

  6. css 清除浮动(转)

    转自http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响 ...

  7. [转]PHP echo, print, printf, sprintf函数的区别和使用

    1. echo函数: 输出函数,是命令,不能返回值.echo后面可以跟很多个参数,之间用分号隔开,如: echo $myvar1; echo 1,2,$myvar,"<b>bol ...

  8. USACO Longest Prefix 【水】

    用Dp的思想解决了这道题目,也就是所谓的暴力= = 题意:给出一个集合,一个字符串,找出这个字符串的最长前缀,使得前缀可以划分为这个集合中的元素(集合中的元素可以不全部使用). 还不会Trie 树QA ...

  9. U盘做svn版本控制

    svn提供的访问方式有: file:///本地路径/to/svnrepo/ //访问本地磁盘 http://host/to/svnrepo/ //通过配置subversion的apache服务器的we ...

  10. reactjs Uncaught TypeError: Cannot read property 'location' of undefined

    reactjs Uncaught TypeError: Cannot read property 'location' of undefined reactjs 路由配置 怎么跳转 不成功 国内搜索引 ...