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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 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
十天学会php之第八天
2006/10/09 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Python中类的初始化特殊方法
2017/12/01 Python
python实现维吉尼亚算法
2019/03/20 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
工作时间上网检讨书
2014/02/03 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
服务明星事迹材料
2014/12/29 职场文书
2014年终个人总结报告
2015/03/09 职场文书
python神经网络Xception模型
2022/05/06 Python