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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
yii操作cookie实例简介
2014/07/09 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP chr()函数讲解
2019/02/11 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python 12306抢火车票脚本
2018/02/07 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Pygame的程序开始示例代码
2020/05/07 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
杨善洲电影观后感
2015/06/04 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL