css3选择
在一些项目中,我们常常需要实现选择类似于3的倍数的位数的元素,或者从第n个之后的元素,或者从第n个到第m个元素这种类型的选择,如果说在以前,想完全通过css实现,似乎是天方夜谭,根本不可能实现,CSS3的出现,给我们提供了类似的选择器,但是又有多少人能够真正通过CSS3选择器实现这些功能呢?
下面,列举几种类似的选择器:
1、选择第一个元素
ul li:first-child{}
这个是css3直接提供的选择器,相对应的就有选择最后一个
2、选择最后一个元素
ul li:last-child{}
3、选择从第m个到最后一个元素,包括第m个元素
ul li:nth-child(n+m){}
4、选择倒数第m个元素
ul li:nth-child(-n+m){}
5、选择从第start个元素到第end个元素
ul li:nth-child(n+start):nth-child(-n+end){}
6、选择所有元素,除了第m个
ul li:not(:nth-child(m)){}
7、选择3的倍数的元素
ul li:nth-child(3n){}
这其中,如果能够了解:nth-child和:nth-of-type的区别的话,可以实现更多有意思的选择,是不是按捺不住了?
赶紧试试吧!
css3选择的更多相关文章
- CSS3选择器之:nth-child(n)
第一次用到这个选择器还是为了解决下面了的问题: 手机的前端,我们使用了mint-ui,里面有一个日期选择控件,但是选择的时候没有提供年月的选择器,如: 而是提供了下面的方式: 为了达到上面的效果,使用 ...
- css3选择符使用个人理解。
元素选择符: 通配选择符:一般用* 星号表示 他会命中整体标签. 类型选择符:一般用者空格表示 他会命中标签自己的所有子元素. ID选择符: 一般用# 井号表示 他会命中以id为属性的标签 ...
- 晨读笔记:CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3选择器之学习笔记
首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素.而nth-child和nth-last-child则是父元素下指定序号的子元素, ...
- css3选择符
常用的选择符 1.元素选择符 2.id选择符 3.class选择符 4.通配符 5.群组选择符 6.包含选择符 7.伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名) 8.伪对象选择符( ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
随机推荐
- DevExpress GridView 那些事儿
1:去除 GridView 头上的 "Drag a column header here to group by that column" --> 点击 Run Desig ...
- bzoj 4184 shallot——线段树分治+线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4184 本来想了可持久化trie,不过空间是 nlogn (出一个节点的时候把 tot 复原就 ...
- HanLP 关键词提取算法分析详解
HanLP 关键词提取算法分析详解 l 参考论文:<TextRank: Bringing Order into Texts> l TextRank算法提取关键词的Java实现 l Text ...
- python 多线程 并发socket实例
sever side: import socketserver class MyTCPHandler(socketserver.BaseRequestHandler): def handle(self ...
- Java第05次实验提纲(Java图形界面编程)
1. Swing与NetBeans 使用NetBeans编写简单界面.见GUI实验参考文件中的0.第06次实验(图形程序设计.事件处理与Swing).doc 题目1: Swing用户界面组件与事件处理 ...
- selenium python选取下拉框中的值
https://stackoverflow.com/questions/47689936/unable-to-scroll-and-select-desired-year-from-calender- ...
- ALGO-147_蓝桥杯_算法训练_4-3水仙花数
问题描述 打印所有100至999之间的水仙花数.所谓水仙花数是指满足其各位数字立方和为该数字本身的整数,例如 =^+^+^. 样例输入 一个满足题目要求的输入范例. 例: 无 样例输出 xxx xxx ...
- C++进阶--编译器自动生成的类函数
//############################################################################ /* 在C++ 03标准下 在没有显式定义 ...
- JGit与远程仓库链接使用的两种验证方式(ssh和https)
JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...
- 一篇对OAuth2.0开发实例的介绍
今天看到了博友对SSO的文章,SSO单点登录的讲解突然想写一篇关于OAuth2.0用户授权的介绍. 应用场景:在APP或者网页接入一些第三方应用时,时长会需要用户登录另一个合作平台,比如QQ,微博,微 ...