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 中实现炫酷的loading效果
Apr 26 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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进行微信公众平台开发的示例
2015/08/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
ECMAScript 基础知识
2007/06/29 Javascript
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python选课系统开发程序
2016/09/02 Python
Python 含参构造函数实例详解
2017/05/25 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
法学函授自我鉴定
2014/02/06 职场文书
爱心捐款倡议书
2014/04/14 职场文书
干部作风建设心得体会
2014/10/22 职场文书
白银帝国观后感
2015/06/17 职场文书