zoukankan      html  css  js  c++  java
  • CSS3选择器:nth-child和:nth-of-type之间的差异

    :nth-child和:nth-of-type之间的差异

    直接看实例:

    <section>
        <div>我是一个普通的div标签</div>
        <p>我是第1个p标签</p>
        <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
    </section>
    p:nth-child(2) { color: red; }
    p:nth-of-type(2) { color: red; }

    效果:一致,第二个p标签的文字变成了红色

    <section>
        <div>我是一个普通的div标签</div>
        <p>我是第1个p标签</p>
        <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
    </section>
    p:nth-child(2) { color: red; }
    p:nth-of-type(2) { color: red; }

     效果:不一致,p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了

    对于p:nth-child(2)表示这个元素要是p标签,且是第二个子元素,是两个必须满足的条件。于是,就是第一个p标签颜色为红色(正好符合:p标签,第二个子元素)。如果在div标签后面再插入个span标签,
    <section>
        <div>我是一个普通的div标签</div>
        <span>我是一个普通的span标签</span>
        <p>我是第1个p标签</p>
        <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
    </section>

     那么p:nth-child(2)将不会选择任何元素。

     而p:nth-of-type(2)表示父标签下的第二个p元素,显然,无论在div标签后面再插入个span标签,还是h1标签,都是第二个p标签中的文字变红。

  • 相关阅读:
    两种数组,注意用法
    PD 导出数据库结构
    获取随机金额:上限下限都要取到
    mysql常用语句
    SQL替换字符串、条件查询
    jtopo树结构方法积累
    jtopo 学习
    .net C# SortedList用法
    .net C# List用法
    .Net中C# Dictionary 用法(转)
  • 原文地址:https://www.cnblogs.com/NatChen/p/8241604.html
Copyright © 2011-2022 走看看