html后代选择器的语法,[转]CSS子选择器与后代选择器

注：之前一直不混淆子选择器和后代选择器的关系，今天看到一篇文章很不错，一下子明白了，特此转载。

通俗的讲就是：儿子一定是后代，但是后代不一定是儿子。

css子元素选择器和后代选择器在功能描述上非常相同，但是他们其实是有区别的、

本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别，需要的朋友可以参考一下。

首先我们来了解一下[子元素选择器]与[后代选择器]的基本语法。

语法

子元素选择器的语法如下：

div>ul{color：red；}

子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素

后代选择器的语法如下：

h1 em{color:red;}

后代选择器可以选择作为某元素后代的元素,父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

二者区别：

我们通过一个实例来讲解子选择器与后代选择器的区别。

先来看一下后代选择器div p的效果

div p{ background-color:yellow;}

子元素选择器

后代选择器

运行结果如图：

再来看一下子选择器div>p的效果

div > p{ background-color:yellow;}

子元素选择器

后代选择器

运行结果如图：

从上面实例可以看出子选择器只作用于其第一代元素，而后代选择器作用于N(N为自然数)代元素。

html后代选择器的语法,[转]CSS子选择器与后代选择器相关推荐

黑马程序员pink老师前端h5(html5)+css3(16)P94-P104伪类选择器上并集选择器子选择器后代选择器emmet语法生成标签快速格式化代码复合选择器简介
P94-emmet语法生成标签 Emmet语法 Zen codig他使用缩写,来提高htmlcss编写速度 div+p div class="nav" div id="b ...
CSS语法与CSS选择器
目录 CSS 语法实例例子解释 CSS 选择器 CSS 元素选择器实例 CSS id 选择器实例 CSS 类选择器实例实例实例 CSS 通用选择器实例 CSS 分组选择器实例所有简 ...
【第一章】 jQuery入门---选择器 and $工具属性CSS
jQuery1:入门知识--选择器 3W1H What?是什么? JavaScript库:封装了很多JS代码 JavaScript库:jQuery(90%).E ...
html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...
js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器一.总结一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...

html后代选择器的语法,[转]CSS子选择器与后代选择器

html后代选择器的语法,[转]CSS子选择器与后代选择器相关推荐

最新文章

热门文章