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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
HTML页面中使两个div并排显示的实现
May 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
分享一个php 的异常处理程序
2014/06/22 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python3设计模式之简单工厂模式
2017/10/17 Python
python实现树形打印目录结构
2018/03/29 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python实现多张图片拼接成大图
2019/01/15 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
教师自荐信范文
2013/12/09 职场文书
个人求职信范文分享
2014/01/06 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
大学班级文化建设方案
2014/05/06 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
本科生自荐信
2014/06/18 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
讲解MySQL增删改操作
2022/05/06 MySQL
js判断两个数组相等的5种方法
2022/05/06 Javascript