CSS3 层次选择器
2016-11-20 00:00
429 查看
后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:.demo li {color: blue;}
上面表示的是,选中div.demo中所有的li元素
所有浏览器都支的后代选择器。
子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。ul > li {background: green;color: yellow;}
上在代码表示选择ul下的所有子元素li。如:
IE6不支持子元素选择器。
相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。li + li {background: green;color: yellow; border: 1px solid #ccc;}
上面代码表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个,请看效果:
因为上面的li+li其中第二li是第一li的相邻元素,第三个又是第二个相邻元素,因此第三个也被选择,依此类推,所以后面九个li都被选中了,如果我们换过一种方式来看,可能会更好的理解一点:
.active + li {background: green;color: yellow; border: 1px solid #ccc;}
按照前面所讲的知识,这句代码很明显选择了li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。如图:
IE6不支持这个选择器
通用兄弟选择器(E 〜 F)
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
上面的代码所表示的是,选择中了li.active 元素后面的所有兄弟元素li,如图所示:
通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素,这样说起来可能会有迷糊,大家可以仔细看看其相邻兄弟的效果图。
IE6不支持这种选择器的用法。
相关文章推荐
- CSS3层次选择器
- css3选择器--基本选择器,层次选择器,属性选择器
- CSS3选择器——2、层次选择器
- CSS3-层次选择器语法(实战)
- css3选择器--层次选择器
- CSS3选择器——1、基本选择器
- Jquery中的层次选择器与find()的区别
- CSS3常用的结构性伪类选择器①:root not empty target
- CSS3 选择器——基本选择器
- :nth-child(css3的伪类选择器)
- CSS3的[att$=val]选择器
- 【CSS3】---结构性伪类选择器-root+not+empty+target
- 选择器——层次选择器
- 前端的小玩意(10)CSS3的:nth选择器
- CSS3 :nth-child()伪类选择器
- 【CSS3】only-child选择器
- 几种常用 css3 选择器解释
- 10019---层次选择器
- HTML5中CSS3的结构伪类选择器
- css3选择器