html的后代选择器,CSS3后代选择器和同级选择器简介和实例_html/css

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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

html的后代选择器,CSS3后代选择器和同级选择器简介和实例_html/css_WEB-ITnose相关推荐

CSS的子选择器与后代选择器的区别
来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...
[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
css选择器所有后代,CSS 后代选择器
具体应用后代选择器的功能极其强大.有了它,可以使 HTML 中不可能实现的任务成为可能. 假设有一个文档,其中有一个边栏,还有一个主区.边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表.不 ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
html后代选择器的语法,[转]CSS子选择器与后代选择器
注:之前一直不混淆子选择器和后代选择器的关系,今天看到一篇文章很不错,一下子明白了,特此转载. 通俗的讲就是: 儿子一定是后代,但是后代不一定是儿子. css子元素选择器和后代选择器在功能描述上非常相 ...
CSS复合选择器：后代选择器
复合选择器:后代选择器格式:元素1 元素2 { 样式内容} 1.后代选择器中外层是父级,内层是子级,子级可以一直嵌套 2.元素1 和元素2 之间用空格隔开 3.元素1 和元素2 是任意的基础选择器, ...
html子代选择器,Css 后代选择器与子代选择器的区别
后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不 ...
js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...

html的后代选择器,CSS3后代选择器和同级选择器简介和实例_html/css_WEB-ITnose

html的后代选择器,CSS3后代选择器和同级选择器简介和实例_html/css_WEB-ITnose相关推荐

最新文章

热门文章