CSS3后代选择器和同级选择器简介和实例
2016-01-10 18:36
555 查看
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器(或称组合选择器),
分为后代选择器(Descendant combinator/Child combinators)和同级选择器(Sibling combinators):
其中后代选择器分以下3个:
1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。
2. 箭头(>)。表示直系关系。div > p 表示div的儿子辈的元素。
3. 星号(*)。表示隔代关系。div * p表示div的孙子辈及之后的元素。
在线实例:http://wow.techbrood.com/fiddle/15759
同级选择器分为以下2个:
1. 加号(+)。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。
2. 波浪号(~)。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素(中间可以隔着其他元素)。
在线实例:http://wow.techbrood.com/fiddle/15761
关于CSS3选择器参考阅读:
http://techbrood.com/Guide/h5b2a?p=css-selectors
http://techbrood.com/Guide/h5b2a?p=css-pseudo-classes
by iefreer
分为后代选择器(Descendant combinator/Child combinators)和同级选择器(Sibling combinators):
其中后代选择器分以下3个:
1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。
2. 箭头(>)。表示直系关系。div > p 表示div的儿子辈的元素。
3. 星号(*)。表示隔代关系。div * p表示div的孙子辈及之后的元素。
在线实例:http://wow.techbrood.com/fiddle/15759
同级选择器分为以下2个:
1. 加号(+)。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。
2. 波浪号(~)。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素(中间可以隔着其他元素)。
在线实例:http://wow.techbrood.com/fiddle/15761
关于CSS3选择器参考阅读:
http://techbrood.com/Guide/h5b2a?p=css-selectors
http://techbrood.com/Guide/h5b2a?p=css-pseudo-classes
by iefreer
相关文章推荐
- 通过字符串、颜色和尺寸资源改变文字及样式
- 获取document对象除了getElement方法,居然还可以使用css选择器方法!!!
- CSS权威指南学习笔记(1)
- 简易在线投票系统(php)——前端设计(css)
- 利用css3伪类实现边框环绕效果
- css3制作立体导航
- 【CSS3】CSS3 滤镜实现
- 燕十八视频--CSS
- 燕十八---CSS画三角形
- css3实现图片旋转效果
- css中margin、padding等属性的简写方式解读
- 初学DIV+CSS需要注意的6个问题
- 如何书写可维护的CSS代码
- CSS代码书写顺序
- css中margin、padding等属性的简写方式解读
- 初学DIV+CSS需要注意的6个问题
- 如何书写可维护的CSS代码
- CSS代码书写顺序
- css display inline block 兼容性问题写法
- CSS 弹性布局如何实现