zoukankan      html  css  js  c++  java
  • nth-child()选择器小结

      之前也用到过nth-child,只是当时理解的不够透彻。今天回过头去看这个知识点时,发现了一个易错点。

      浏览器支持情况:

      

      所有主流浏览器都支持nth-child()选择器,除了IE8及更早的版本。

      下面还是简单说一下它的用法吧:

      nth-child(n):该选择器匹配属于父元素的第n个子元素,不论元素的类型。其中n可以是数字、关键词或公式。

      关于数字就不多说了。下面先说说关键词:如nth-child(odd)或nth-child(even)。

      odd或even可用于匹配下标是奇数或偶数的子元素的关键词(注意:第一个子元素下标是1)

      

      关于公式的用法:nth-child(an+b)。a表示周期的长度,b表示偏移值(从0开始)。如nth-child(3n+1)表示每3个为一个周期,选择每个周期里的第2个元素。

      重点来了:

      如h2:nth-child(odd),首先nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素的所有子元素一起计算的。

      换句话说:h2:nth-child(odd),其含义并不是选择第奇数个h2来使用,而是指当第奇数个元素是h2则选中。

      

  • 相关阅读:
    用laravel写的项目如何布置在虚拟机上
    在Laravel中注册中间件
    ssh出错
    DB2单表导入导出
    DB2 还原数据库
    ssh-keygen 免交互
    DB2 命令
    21个项目玩转深度学习:基于TensorFlow的实践详解06—人脸检测和识别——数据集
    jieba—parallel
    更新数据
  • 原文地址:https://www.cnblogs.com/jf-67/p/6708064.html
Copyright © 2011-2022 走看看