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 ...
随机推荐
- py-day1-6 python 5个灰魔法 【len,index索引,for循环,切片】
# 索引,下标,获取字符串中的某一个字符. test = 'MuMingJun' v = test[3] print(v) i # 切片 test = 'MuMingJun' v = test[0:- ...
- tomcat端口号被占用的问题
错误原因:8080端口被其他的应用占用! 在网上查了下解决方案,有些说在任务管理窗口关闭javaw.exe,有些说shutdown一下tomcat,亲测在某些场合下可用. 下面是摘自其它博客园里文章的 ...
- 页面框架加载完自动执行函数$(function(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
- Android adb 模拟滑动 按键 点击事件
模拟事件全部是通过input命令来实现的,首先看一下input命令的使用: usage: input ... input text <string> input keyeven ...
- Linux环境下查看线程数的几种方法
1.cat /proc/${pid}/status 2.pstree -p ${pid} 3.top -p ${pid} 再按H,或者直接输入 top -bH -d 3 -p ${pid} top ...
- 解决Delphi 2010启动时卡死并报“displayNotification: 堆栈溢出”错误
1. 清理IE的历史记录,删除浏览器缓存(不需要清cookie) 2. 禁用startpage 2.1 从 Delphi 2010 启动菜单上点右键 -> 查看属性->快捷方式->目 ...
- jquery 中prop和 attr
prop就是给html中元素固有的属性赋值 而attr是给元素定义新的属性值.
- Git将本地库内容推送到远程
本地库与远程库的交互 1 .将本地库的内容推送到远程库 A.创建一个本地仓库 $ mkdir gitdemo B.初始化本地仓库 $ git init C.项目根目录下创建 .gitignore 文件 ...
- 关于在项目中使用spring data redis与jedis的选择
项目中需要用到redis,主要用来作为缓存,redis的客户端有两种实现方式,一是可以直接调用jedis来实现,二是可以使用spring data redis,通过spring的封装来调用. 应该使用 ...
- 【nginx】之proxy_pass
在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径:如果没有/,表示相对路径,把匹配的路径部分也给代理走. 假设下面四种情况分别用 h ...