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;}
⼦元素选择器
手机上可以打html与css的app
后代选择器
运⾏结果如图:
从上⾯实例可以看出⼦选择器只作⽤于其第⼀代元素,⽽后代选择器作⽤于N(N为⾃然数)代元素。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。