两种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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
javascript模拟命名空间
2015/04/17 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python实现端口复用实例代码
2014/07/03 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python3实现名片管理系统
2020/11/29 Python
浅谈python常用程序算法
2019/03/22 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
工程质量保证书
2015/05/09 职场文书
法律意见书范本
2015/06/04 职场文书
公司回复函格式
2015/07/14 职场文书
导游词之广西漓江
2019/11/02 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis