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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP开发中常用的8个小技巧
2008/08/27 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python图书管理系统
2020/04/05 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
广州某公司软件工程师面试题
2014/12/22 面试题
《寓言两则》教学反思
2014/02/27 职场文书
运动会标语
2014/06/21 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
埃及王子观后感
2015/06/16 职场文书
品德与社会教学反思
2016/02/24 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
spring boot实现文件上传
2022/08/14 Java/Android