利用 :first-child 和 :nth-last-child 确定子元素数目

时间:2022-10-28 14:56:25

读《css揭秘》时,发现选择器的神奇作用,可以确定子元素数目,比如:

li:first-child:nth-last-child(2),li:first-child:nth-last-child(2)~li {
background-color:pink;
}

这个适用于第一个子元素为li且父元素拥有2个子元素,则第一个li和后续的li都将适用,并且如果有更多或更少的子元素都不会适用。

仔细思考下其中的核心逻辑:

  • first-child:nth-last-child(2)=>即是第1个,又是倒数第2个=>总共有两个子元素

利用选择器还可以继续拓展:

  • first-child:nth-last-child(n+2)=>即是第1个,又是第2,3,4,,,个=>子元素数目>2
  • first-child:nth-last-child(-n+4)=>即是第1个,又是倒数第1,2,3,4个=>子元素数目<=4
  • first-child:nth-last-child(-n+4):nth-last-child(n+2)=>即是第1个,又是第2,3,4,,,个,又是倒数第1,2,3,4个=>子元素数目[2,4]

利用 :first-child 和 :nth-last-child 确定子元素数目的更多相关文章

  1. 利用js对象将iframe数据缓存&comma; 实现子页面跳转后&comma; 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  2. 安卓自己定义对话框及The specified child already has a child问题

    问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...

  3. 利用快排partition求前N小的元素

    求前k小的数,一般人的想法就是先排序,然后再遍历,但是题目只是求前N小,没有必要完全排序,所以可以想到部分排序,而能够部分排序的排序算法我能想到的就是堆排序和快排了. 第一种思路,局部堆排序. 首先, ...

  4. 父容器利用opacity设置透明后,子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  5. 利用set排序数组并且去掉重复的数组元素

    public class testList { public static void main(String[] args){ java.util.List<String> ls = ne ...

  6. 利用堆排序找出数组中前n大的元素

    #include <stdio.h> #include <stdint.h> #include <stdlib.h> #include <time.h> ...

  7. (Java)利用ListIterator(iterator 重复器&sol;迭代器的子接口) 操作ArrayList

    add()方法是在下一个将要取得的元素之前插入新的元素.因此如果在下一个将要取得的元素的序号为0,则在序号0的元素前插入新的元素. 测试: 见第1.行,在序号为0的元素前添加一个元素. 见第2.行:这 ...

  8. 利用Python Counter快速计算出现次数topN的元素

    需要用Python写一段代码,给定一堆关键词,返回出现次数最多的n个关键字. 第一反应是采用一个dict,key存储关键词,value存储出现次数,如此一次遍历即可得出所有不同关键词的出现次数,而后排 ...

  9. 利用filter,巧妙地去除Array的重复元素

    var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; r ...

随机推荐

  1. mock the facade

    mock the facade: Auth::shouldReceive('user')->andReturn($user = m::mock('StdClass')); $user->s ...

  2. 51单片机中断interrupt……using……

    51单片机中断细节的一些问题. interrupt0:外部中断0interrupt1:定时器中断0interrupt2:外部中断interrupt3:定时器中断1interrupt4:串口 using ...

  3. Data Science at the Command Line学习笔记(一)

    学习Data Science at the Command Line时,win7下安装环境是遇到了一些小问题,最后通过百度解决. 官方指导可以在这个地址找到:http://datascienceatt ...

  4. elipse&plus;pydev&plus;python开发arcgis脚本程序

    环境配置参考:http://www.cnblogs.com/halfacre/archive/2012/07/22/2603848.html 添加arcpy类库.arctoolbox.arcgis-b ...

  5. c&plus;&plus; Map使用

    引入头文件: #include <map>1.初始化map<int, int> a, b;map<sting, int> a, b;2.添加数据 map<in ...

  6. JavaScript——以简单的方式理解闭包

    闭包,在一开始接触JavaScript的时候就听说过.首先明确一点,它理解起来确实不复杂,而且它也非常好用.那我们去理解闭包之前,要有什么基础呢?我个人认为最重要的便是作用域(lexical scop ...

  7. android怎样写一个循环文字滚动的TextView

    效果图: 在layout中这样来声明: <com.kaixin001.view.ScrollText android:id="@+id/news_statustxt" and ...

  8. python抽象篇:面向对象

    1.面向对象概述 面向过程编程:根据操作数据的函数或语句块来设计程序的. 函数式编程:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象编程:数据和功能结合起来,用称为对象的东西包 ...

  9. esp32固件烧录

    正常使用IO0置空即可.烧录时需要en引脚接高电平,IO0接地,使用乐鑫的烧录工具烧录即可.注意如果启用wifi,供电一定要不小于500ma,普通的usb转ttl模块无法满足wifi启动的,被坑的好惨 ...

  10. 微服务架构演变过程-SpringCloud