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轻松实现圆角效果
Nov 09 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
sass 常用备忘案例详解
Sep 15 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
js实现微信分享代码
2020/10/11 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python多分支if语句的使用
2020/09/03 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
卫校毕业生自我鉴定
2013/10/31 职场文书
学雷锋感言
2015/08/03 职场文书
办公室卫生管理制度
2015/08/04 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python