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三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式 ...
随机推荐
- Java程序调用自动关机指令 1分钟内自动关机
package com.swift;//可以不要这句 import java.io.IOException; public class Shutdown100 { public static void ...
- sql注入问题 java中将MySQL的数据库验证秘密加上 ' or '1'= '1 就可以出现万能密码
password的字符串中,加上 ' or '1'= '1 就可以制作出万能密码. 原因如下: 原代码中密码是123456 执行数据库查询语句 实际上执行的SQL语句是: select * from ...
- ABC108C - Triangular Relationship(打表)
题意 给出$n, k$,求出满足$a+b, b + c, c + a$都是$k$的倍数的三元组$a, b, c$的个数,$1 \leqslant a, b, c \leqslant N$ $n \le ...
- Windows10系统下查看mysql的端口号并修改
mysql的端口号默认是3306,初学者可能有时会忘记或者之前修改了默认的端口号,忘记了,或者很多时候我们一台电脑需要安装两个mysql或者想设置一个自己的喜欢的数字,那么接下来我们来看看如何查看或者 ...
- 关于mybatis callSettersOnNulls 配置
今天做了一件坑了自己的事情,为此浪费了好多时间... 在mybatis的设置中,看到了这样的一行设置.出于程序员的好奇,去搜索了一下,这条设置是干什么的. <setting name=" ...
- PHP 作用域
- Admin站点
使用admin站点 a.在settings.py中设置语言和时区 LANGUAGE_CODE = 'zh-hans' # 使用中国语言 TIME_ZONE = 'Asia/Shanghai' # 使用 ...
- Codeforces Round #472 A-D
A题: 题意:就是给你一个长度为n的字符串,有三种颜色,其中有一些‘?’的字符代表未着色,你需要找到至少有两种方法染色,同时满足相邻两个字符间不能相同: 思路:有两种染色方法的前提:首先给定的字符串中 ...
- Android广告页循环播放
摘要:项目要求做一个广告页,实现几秒更换一次广告页,下方还有指示第几张广告页,同样也支持手动左滑或右滑. 1.准备好粘贴5个有关广告页的类. ①BaseViewPager==>自定义高度的Vie ...
- Python虚拟机类机制之instance对象(六)
instance对象中的__dict__ 在Python虚拟机类机制之从class对象到instance对象(五)这一章中最后的属性访问算法中,我们看到“a.__dict__”这样的形式. # 首先寻 ...