CSS3结构性伪类选择器九种写法


Posted in HTML / CSS onApril 18, 2012

一、X:nth-child(n)

Example Source Code : li:nth-child(3) {color: red;}

接下来的几个伪类选择器使用上非常类似,功能也比较接近。

:nth-child(n),用于匹配索引值为n的子元素。索引值从1开始。

X:nth-child()用法实际上有三种变化,demo的用法是最简单的,X:nth-child()更强大的用处在于奇偶匹配,明河不展开讲,有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》

二、X:nth-last-child(n)

Example Source Code : li:nth-last-child(2) {color: red;}

:nth-child(n),是从第一个开始算索引,而X:nth-last-child(n)是从最后一个开始算索引。

三、X:nth-of-type(n)

Example Source Code:ul:nth-of-type(3) {border: 1px solid black;}

nth-of-type与nth-child的效果是惊人的相似,想要更多的了解nth-of-type请看《Alternative for :nth-of-type() and :nth-child()》,:nth-of-type(N)

四、X:nth-last-of-type(n) 

Example Source Code :ul:nth-last-of-type(3) {border: 1px solid black;}

:nth-last-child效果相似。

五、X:first-child 

Example Source Code: ul li:first-child {border-top: none;}

匹配子集的第一个元素。IE7就可以支持了,这个伪类还是非常有用的。

六、X:last-child

 Example Source Code :ul > li:last-child {color: green;}

与:first-child效果相反

留意IE8支持:first-child,但不支持:last-child。

七、X:only-child

Example Source Code: div p:only-child {color: red;}

 这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。

八、X:only-of-type

Example Source Code: li:only-of-type {font-weight: bold;}

与:only-child类似。

九、X:first-of-type

Example Source Code :ul:first-of-type{font-weight: bold;}
HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 #HTML / CSS
时尚的CSS3进度条效果
Feb 22 #HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 #HTML / CSS
CSS3制作日历实现代码
Jan 21 #HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 #HTML / CSS
You might like
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP xpath()函数讲解
2019/02/11 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
2014年党课学习材料
2014/05/11 职场文书
投标诚信承诺书
2014/05/26 职场文书
银行金融服务方案
2014/06/11 职场文书
建筑工地宣传标语
2014/06/18 职场文书
老龙头导游词
2015/02/11 职场文书
新员工入职感想
2015/08/07 职场文书
员工试用期工作总结
2019/06/20 职场文书
python Polars库的使用简介
2021/04/21 Python