两种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实现的几个小loading效果
Sep 27 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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来处理多个提交任务
2006/10/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
零基础php编程好学吗
2019/10/11 PHP
js arguments对象应用介绍
2012/11/28 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
ajax异步请求详解
2017/01/06 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python fileinput模块使用实例
2015/05/28 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python版百度语音识别功能
2019/07/09 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
婚礼家长致辞
2015/07/27 职场文书
百年校庆感言
2015/08/01 职场文书
导游词之昭君岛
2020/01/17 职场文书