css3选择器基本介绍


Posted in HTML / CSS onDecember 15, 2014

这些选择器还是比较简单的,就不再此一一举例样式了.还有随着各种浏览器的升级,也不在此讨论各种版本的浏览器对于属性样式的兼容和支持问题久了.

一:属性选择器

[attr=val]:属性attr是val;
[attr*=val]:属性attr中包含val;
[attr^=val]:属性attr中开头是val;
[attr$=val]:属性attr结尾是val;

二:伪类选择器

:first-line,为某个元素中的第一行文字使用样式.
:first-letter,为某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式.
:before,在某个元素之前插入一些内容.
例如:.gys:before{content:'思思博士';}
:after,在某个元素之后插入内容.

:root,有效文本区域,即html区域
例子::root{ background:'red';}
body{ background:"yellow";}
这个时候整个页面背景就会变成黄色,而文本区域的背景色就是红色.
:not,排除不需要的子元素
例如:body *:not(h1){ color:red;} //body中所有的子元素,当时排除h1元素
:empty,当元素内容为空白是使用的样式.
:target,跳转到这个链接后,执行样式.
例如:
<a href="#test1">111111111111</a>
<a href="#test2">222222222222222</a>
<div id="test1">1111111111111111</div>
<div id="test2">222222222222</div>

#test1:target{ background-color:#000;}//跳转到id=test1时背景色变化

:first-child,第一个子元素
:last-child,最后一个子元素
:nth-child(n),指定父元素中第n的子元素.n如果是odd偶数序列的子元素,even技术序列的子元素
:nth-last-child(n),指定父元素中倒数第n的子元素,n如果是odd偶数序列的子元素,even基数序列的子元素
:nth-of-type(n),指定同类型中的指定n.
:nth-of-last-type(n),指定同类型中的倒数第n的元素.
:nth-child(an+i),循环使用样式.
例如:li:nth-child(4n+1){color:red;}
li:nth-child{4n+2}{ color:bluee;}
li:nth-child(4n+3){color:yellow;} 
li:nth-child(4n+4){color:black;}
:only-child,当父元素中只有一个子元素时使用.
例如:li:only-child{ color:red;}

三,表单伪类选择器

:active元素被激活(鼠标放下还没有抬起)
:focus获得焦点时,
:hover,鼠标悬浮在元素上
例如:input[type='text']:active{ color:#F00;}
input[type='text']:focus{ color:#F00; background-color:#960;}
input[type='text']:hover{ color:#0F0;}

:enabled,元素处于可用状态,
:disabled,元素处于不可用状态
:read-only,元素处于只读状态
:read-write,元素处于非只读状态

:checked,表单中radio或checkbox复选框处于选取状态时的样式
:default,当页面打开时默认处于选取状态的单选框或复选框的样式.
:indeterminate,用来指定页面打开时,如果一组单选框中任何一个单选框都没有设定选取状态时整租单选框的样式,如果用户选取其中任何一个单选框,这该样式被取消指定.目前只用opera支持.
:selection,但元素处于选中状态时的样子.

HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
css3的transition属性详解
Dec 15 #HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 #HTML / CSS
CSS3简单实现照片墙
Dec 12 #HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
You might like
php限制ip地址范围的方法
2015/03/31 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
求职自荐信范文格式
2013/11/29 职场文书
减负增效提质方案
2014/05/23 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
物业公司管理制度
2015/08/05 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
深入理解python协程
2021/06/15 Python