zoukankan      html  css  js  c++  java
  • CSS3 :nth-child(n)使用注意

    :nth-child(n)    ---->选中某个元素,该元素必须是某个父元素下的第n个子元素;

    p:nth-child(n)   ---->选中p元素,且该p元素必须是某个父元素下的第n个子元素

    注意:n是从1开始的

    如下代码,p:nth-child(1),只会选中第二个div中第一个子元素p;

    不会选中第一个div中的第一个p,因为第一个div中第一p元素不是第一个子元素

    <style>
        p:nth-child(1){
            color:red
        }        
    </style>
    <div style="border:1px solid">
        <span>div span中第一个段落。</span>
        <p>div 中第一个段落。</p>
        <p>div 中的最后一个段落。</p>
    </div><br>
    
    <div style="border:1px solid">
        <p>另一个 div 中第一个段落。</p>
        <p>另一个 div 中的最后一个段落。</p>
    </div>

    正方向范围

    li:nth-child(n+6)

    选中从第6个开始的子元素

    负方向范围

    :nth-child(-n+9)

    选中从第1个到第9个子元素。使用 :nth-child(-n+9) ,就相当让你选中第9个和其之前的所有子元素

    前后限制范围

    :nth-child(n+4):nth-child(-n+8)

    选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素,上面的例子里是从第4个到第8个子元素

    奇数、偶数位

    :nth-child(odd)

    :nth-child(even)

    隔选择子元素

    :nth-child(3n+1),

    选择1,4,7,10

    范围高级用法

    nth-child(n+2):nth-child(odd):nth-child(-n+9)

    使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。

  • 相关阅读:
    移动开发 Native APP、Hybrid APP和Web APP介绍
    urllib与urllib2的学习总结(python2.7.X)
    fiddler及postman讲解
    接口测试基础
    UiAutomator2.0 和1.x 的区别
    adb shell am instrument 命令详解
    GT问题记录
    HDU 2492 Ping pong (树状数组)
    CF 567C Geometric Progression
    CF 545E Paths and Trees
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6603858.html
Copyright © 2011-2022 走看看