zoukankan      html  css  js  c++  java
  • nth-child()和nth-of-type()的区别,以及如何在nth中添加变量和表达式

    两者都是选择器,在CSS和JS中,都可以用来选择元素。得到一个元素,或者元素集。

    x:nth-child(n)  获取 x元素的父元素中,第n个元素。无类型限制。

    x:nth-of-type(n) 获取x元素父元素中,第n个x元素。限制了类型。

    因此,仅仅从字面意义上,就能做好区分了,一个是限制了类型,一个是不限制。

    关于其中的参数,可以是数字,也可以表达式,也可以是固定的字母。

    el:nth-child(2):选择父元素列表中的第 2 个标签。

    el:nth-child(n):选择父元素列表中的第 n 个标签。

    el:nth-child(2n):选择父元素列表中的第 2n 个标签,也就是偶数个元素。

    el:nth-child(n+n):选择父元素列表中的第 n 个标签后的标签。

    el:nth-child(-n+n):选择父元素列表中的第 n 个标签之前的标签。

    el:nth-child(odd):选择父元素列表中的是奇数的标签。

    el:nth-child(even):选择父元素列表中的是偶数的标签。

    el:nth-child(n+3):未知

    el:nth-child(n-3):未知

    ----------------------------------------------------2020年3月26号新增

    假如a=10

    添加变量的基本方式

      nth-child("+a+"),nth-child-type("+a+")  得到10

    添加表达式的基本方式

      nth-child("+a+1+")-------nth-child(101)  一般来说,这是错误的写法

      nth-child("+(a+1)+")-------nth-child(11)  对比上一个,这一般是正确的写法

  • 相关阅读:
    CentOS7防火墙开启与关闭以及开放6379,3306,80等端口
    Linux 安装PHP PECL 百分百成功
    NSIS 无边框移动问题总结笔记
    Flask项目下的app下的settings.py配置
    django excel xlsx 中文编码
    django admin TabularInline raw_id_fields 添加查询 搜索小图标显示
    m3u8文件解密
    python3 tensorflow 试玩
    python3 tensorflow 安装
    Numpy&Pandas 学习
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/12354487.html
Copyright © 2011-2022 走看看