两种CSS3伪类选择器详细介绍


Posted in HTML / CSS onDecember 24, 2013

css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。

1、UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作,最常见的比如我们"type="text"有enable和disabled两种状态,前者为可写状态后者为不可状态;另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例,比如说你想将"disabled"的文本框与别的文本框区别出来,你就可以这样应用

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的,这里就不在讲述。IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

2、CSS3的:nth选择器

这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法:

:fist-child选择某个元素的第一个子元素;

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素;

:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

:nth-of-type()选择指定的元素;

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;

:first-of-type选择一个上级元素下的第一个同类子元素;

:last-of-type选择一个上级元素的最后一个同类子元素;

nly-child选择的元素是它的父元素的唯一一个了元素;

nly-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty选择的元素里面没有任何内容。

这些伪选择器属于CSS3新增的,如果打击向熟练掌握一定要熟练掌握其性能。

HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 #HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 #HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 #HTML / CSS
You might like
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python 整数越界问题详解
2019/06/27 Python
python实现简单图书管理系统
2019/11/22 Python
python 实现多维数组转向量
2019/11/30 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
浅析Python 多行匹配模式
2020/07/24 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
八一演出活动方案
2014/02/03 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
亮化工程实施方案
2014/03/17 职场文书
文明生主要事迹
2014/05/25 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
高中语文教学反思范文
2016/02/16 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android