1. 除去首个元素

li:not(:first-child)
li + li
li:first-child ~ li

2. 第1-3个元素

li:nth-child(-n+3)

3. 除去第1-3个元素

li:not(:nth-child(-n+3))

4.第5-10个子元素

table tr:nth-child(n+5):nth-child(-n+10) {
  background-color: red;
}

5.倒数第四个以及之前的元素

:nth-last-child(n+4)

6. .list里面li元素个数大于等于4,则显示为红色(数量感知)

.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
  color: red
}

css选择器位置和数量技巧的更多相关文章

  1. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  2. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  3. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  4. CSS选择器、标签,div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  5. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  6. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  7. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  8. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  9. css选择器和优先级总结

    本文转自http://www.cnblogs.com/zxjwlh/p/6213239.html CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式 ...

随机推荐

  1. 2.安装VS Code

    1 打开网站 https://www.visualstudio.com/zh-hans/ 2. 安装 3.可以在程序目录命令行下 code .    用vscode 打开程序 4.下载插件 复制 ex ...

  2. 前端小记2——移动web解决方案

    面向用户级移动web解决方案: 1.代码结构规范 2.字体设置 body{ font-family: -apple-system, BlinkMacSystemFont, "PingFang ...

  3. 2018年ElasticSearch6.2.2教程ELK搭建日志采集分析系统(目录)

    章节一  2018年 ELK课程计划和效果演示 1.课程安排和效果演示 简介:课程介绍和主要知识点说明,ES搜索接口演示,部署的ELK项目演示 章节二 elasticSearch 6.2版本基础讲解到 ...

  4. macOS如何正确驱动集成显卡HDMI(包括视频和音频)

    聊聊如何正确驱动集成显卡HDMI(包括视频和音频)必备条件:1.必须使用AppleHDA驱动声卡(仿冒.clover.applealc都可以的),使用voodoo驱动声卡应该不行的.2.dsdt或者s ...

  5. 深入浅出:了解JavaScript的六种继承

    了解继承前我们需要了解函数的构造,方便我们理解. 常见六种继承方式: 1.原型继承call和apply: 2.原型拷贝:循环父函数protype的key值=子函数prototype的key值: 3.原 ...

  6. BZOJ1576: [Usaco2009 Jan]安全路经Travel(最短路 并查集)

    题意 给你一张无向图,保证从1号点到每个点的最短路唯一.对于每个点求出删掉号点到它的最短路上的最后一条边(就是这条路径上与他自己相连的那条边)后1号点到它的最短路的长度 Sol emmm,考场上想了个 ...

  7. SAP增强Enhancement

    第一代:基于源码增强(子过程subroutine) 第一代增强基于源代码,是SAP提供的一个空代码的子过程.在这个子过程中用户可以添加自己的代码,控制自己的需求.这类增强集中在一些文件名倒数第二个字符 ...

  8. 一个简单的linux下设置定时执行shell脚本的示例

    很多时候我们有希望服务器定时去运行一个脚本来触发一个操作,比如说定时去备份服务器数据.数据库数据等 不适合人工经常做的一些操作这里简单说下 shell Shell俗称壳,类似于DOS下的command ...

  9. 【PHP】什么时候使用Try Catch(转)

    几条建议: 如果无法处理某个异常,那就不要捕获它.  如果捕获了一个异常,请不要胡乱处理它.  尽量在靠近异常被抛出的地方捕获异常.  在捕获异常的地方将它记录到日志中,除非您打算将它重新抛出.  按 ...

  10. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...