• 8.1.2 CSS3选择器 —— 结构性伪类


    1.1 E:nth-child(n):表示E父元素的第n个子节点

      p:nth-child(odd){ background: red }  /* 匹配奇数行 */

      p:nth-child(even){ background: red }  /* 匹配偶数行 */

      p:nth-child(2n){ background: red }   /* 自定义行数 */

    1.2 E:nth-last-child(n):表示E父元素的第n个子节点,从后向前计算

    2.1 E:nth-of-type(n):表示E父元素中的第n个子节点,且类型为E

    2.2 E:nth-last-of-type(n):表示E父元素中的第n个子节点,且类型为E,从后向前计算

    3. E:empty表示E元素中没有子节点。注意:子节点包含文本节点

    4.1 E:first-child:表示E元素中的第一个子节点

    4.2 E:last-child:表示E元素中的最后一个子节点

    4.3 E:first-of-type:表示E父元素中的第一个子节点且节点类型是E的

    4.4 E:last-of-type:表示E父元素中的最后一个子节点且节点类型是E的

    5.1 E:only-child:表示E元素中只有一个子节点。注意

    5.2 E:only-of-type:表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

     兼容:IE9+、FF3.5+、Opera9.6+、safari3.1+、chrome 1.0x+

    :first-child == :nth-child(1)

    :last-child == :nth-last-child(1)

    :first-of-type == nth-of-type(1)

    :last-of-type == nth-last-of-type(1)

    问:E:nth-child(2)和E:nth-of-type(2)区别?

    p:nth-child(2):找p标签父级下的第二个子元素,并且这个元素还得是p标签

    p:nth-of-type(2):找p标签父级下的第二个p元素

  • 相关阅读:
    你好,世界!
    zabbix监控系统(四)创建监控项
    zabbix监控系统(三)监控主机
    zabbix监控系统(二)登录并配置用户
    zabbix监控系统(一)zabbix安装
    python介绍
    Cohen-Sutherland裁剪算法
    eclipse安装openGL方法(完整版)
    java第一课:安装环境变量和用记事本实现Hello World
    实验二
  • 原文地址:https://www.cnblogs.com/zouxinping/p/4950975.html
Copyright © 2020-2023  润新知