css选择器位置和数量技巧
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选择器位置和数量技巧的更多相关文章
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 【CSS】381- 提升你的CSS选择器技巧
我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...
- CSS选择器、标签,div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- [css选择器]总结:IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- css选择器---继承,优先级,层叠
CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- css选择器和优先级总结
本文转自http://www.cnblogs.com/zxjwlh/p/6213239.html CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式 ...
随机推荐
- 题解 P4613 【[COCI2017-2018#5] Olivander】
话说这道题,作为一个哈迷,是不能错过的 我很惊讶本蒟蒻竟然看得懂题面 好了,闲话少说,这道题,虽说是入门难度,但凭着良心说,它还是一道普及 - 的吧 看到标签,“高性能”,大脑的第一反应是快读. 是不 ...
- UVA1629 Cake slicing
题目传送门 直接暴力定义f[x1][y1][x2][y2]是使对角为\((x1, y1),(x2, y2)\)这个子矩形满足要求的最短切割线长度 因为转移顺序不好递推,采用记忆化搜索 #include ...
- 闭包 -------JavaScript
本文摘要:http://www.liaoxuefeng.com/ 函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个对Array的求和.通常情况下,求和的 ...
- nginx入门学习步骤(linux)
一.nginx下载(nginx-1.9.9) http://nginx.org/download/ 二.解压到指定文件夹 tar -zxvf 解压缩文件 三.设置配置信息 在nignx解压文件夹内执行 ...
- c++中的结构化语句 判断语句if 分支语句switch 循环语句 while 和 do while 循环语句for的使用
作业1: 使用if语句,根据1~7的数字,输出今天是星期几?的程序. 方法一,直接使用单独的if语句 #include <iostream> using namespace std; in ...
- Zabbix监控oracle各服务器连接数
需求: 根据机器名查询oracle连接数,并通过zabbix进行监控 脚本: [root@rac1 Zabbix_S]# cat get_conns.py#!/usr/bin/python#codin ...
- 微信小游戏 demo 飞机大战 代码分析 (二)(databus.js)
微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 问题:Could not install packages due to an EnvironmentError: [Errno 13] Permission denied:
1.安装django 执行pip3 install --user django 2.解决方法:加--user 执行pip3 install --user django
- JS学习笔记-构造函数篇
创建实例 funtion Fn (){ var num = 10; this.x = 100; this.getX = function(){ cons ...
- 二 python并发编程之多进程-重点
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...