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 ...
随机推荐
- bzoj 4709 [Jsoi2011]柠檬——单调栈二分处理决策单调性
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4709 题解:https://blog.csdn.net/neither_nor/articl ...
- JFrame包含的容器(JRootPane)
JFrame对象创建后,此对象包含JRootPane类型的容器.JRootPane 下有GlassPane, 和 LayeredPane,LayeredPane下又有ContentPane , ...
- python调用hanlp分词包手记
python调用hanlp分词包手记 Hanlp作为一款重要的分词工具,本月初的时候看到大快搜索发布了hanlp的1.7版本,新增了文本聚类.流水线分词等功能.关于hanlp1.7版本的新功能,后 ...
- Linux mktemp命令
mktemp命令 Linux mktemp命令用于建立暂存文件.mktemp建立的一个暂存文件,供shell script使用.主要特点就是可以做到每次执行mktemp时产生文件和目录都不重名:这个特 ...
- 基于Elasticsearch的智能客服机器人
本次分享主要会介绍一下ES是如何帮我们完成NLP的任务的.在做NLP相关任务的时候,ES的相似度算法并不足以支撑用户的搜索,需要使用一些与语义相关的方法进行改进.但是ES的很多特性对我们优化搜索体验是 ...
- ML: 降维算法-PCA
PCA (Principal Component Analysis) 主成份分析 也称为卡尔胡宁-勒夫变换(Karhunen-Loeve Transform),是一种用于探索高维数据结 ...
- 抓包及分析(wireshark&tcpdump)
1.简介 Wireshark是一个网络协议检测工具,支持Windows平台和Unix平台,我一般只在Windows平台下使用Wireshark,如果是Linux的话,我直接用tcpdump了,因为我工 ...
- 【巷子】---flux---【react】
一.什么是Flux Flux 是一种架构思想,专门解决软件的结构问题.它跟MVC 架构是同一类东西,但是更加简单和清晰. 二.flux的基本概念 (1) .Flux由4部分组成 1.View:视图层 ...
- OwnCloud 开源网盘
https://www.getnas.com/freenas-owncloud/ FreeNAS 插件:OwnCloud 开源网盘 ownCloud 分为服务器端和客户端两个部分,服务器端可以在 Fr ...
- oracle数据库使用小结
select * from r_patient a where a.birthdate= to_date('1953-03-01','yyyy-mm-dd');select * from r_pati ...