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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS极坐标的实例代码
Jun 03 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP会话控制实例分析
2016/12/24 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python write无法写入文件的解决方法
2019/01/23 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
工会工作个人总结
2015/03/03 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
好员工观后感
2015/06/17 职场文书
周一问候语大全
2015/11/10 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers