后代选择器和子元素选择器的区别
Posted shcrk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了后代选择器和子元素选择器的区别相关的知识,希望对你有一定的参考价值。
原文
简书原文:https://www.jianshu.com/p/4a776598c69c
大纲
1、后代选择器和子元素选择器的相关概念
2、后代选择器和子元素选择器的区别
1、后代选择器和子元素选择器的相关概念
1.1、后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
h1 em {color:red;}
1.2、子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
h1 > em {color:red;}
2、后代选择器和子元素选择器的区别
实例分析
CSS中nav ul li ul
与 nav>ul>li
这两种写法的区别是什么,>的作用是什么?
1、nav>ul只选择nav下一级里面的ul元素,例如上面dom结构里id为a的ul。
2、nav ul选择nav内所包含的所有ul元素,例如上面dom结构里面id为a、b、c的全部ul。
3、nav>ul比nav ul限定更严格,必须后面的元素只比前面的低一个级别。
<style> *{ margin:0; padding:0; list-style:none; }nav ul li ul{ display:none; }nav>ul>li{ float:left; padding:10px; border:1px solid blue; }nav>ul>li>ul>li{ padding:10px; border-bottom:1px solid #ccc; } </style> <!-- >是指只能一代接一代,比如: nav>ul>li>ul>li,必须是下面这样的 --> <nav> <ul> <li> <ul> <li></li> </ul> </li> </ul> </nav> <!-- 然后nav ul li ul只要求后面的元素是在nav标签下的顺序即可,对中间隔了几层不敏感,比如: --> <nav> <div> <ul> <div> <a> <li> <div> <ul> <li></li> </ul> </div> </li> </a> </div> </ul> </div> </nav>
以上是关于后代选择器和子元素选择器的区别的主要内容,如果未能解决你的问题,请参考以下文章