两种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把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 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 cc攻击代码与防范方法
2012/10/18 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python实现网页自动签到功能
2019/01/21 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Django学习之文件上传与下载
2019/10/06 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
使用npy转image图像并保存的实例
2020/07/01 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
一套C#面试题
2013/10/09 面试题
同学会主持词
2014/03/18 职场文书
摄影展策划方案
2014/06/02 职场文书
志愿者宣传口号
2014/06/17 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技