后代选择器和子元素选择器的区别

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>

  

 








以上是关于后代选择器和子元素选择器的区别的主要内容,如果未能解决你的问题,请参考以下文章

css选择器的1.5 子选择器

H5 14-后代选择器和子元素选择器

课时73.后代选择器和子元素选择器(理解)

子选择器后代选择器和通用选择器以及伪选择器

CSS系列之后代选择器子选择器和相邻兄弟选择器

在css中 比较 后代选择器和相邻选择器有啥区别 设计一个示例