CSS3属性选择符介绍


Posted in HTML / CSS onOctober 17, 2008

英文原文:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
中文翻译:
http://www.dudo.org/article.asp?id=197
注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注]
在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox,Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待Internet Explorer尽快赶上来,那我们就可以尽情地使用CSS2.1中的选择符了。好在Internet Explorer在其第7个版本中已经在尽力追赶了,至少在某些扩展方面。
如果我们再向前看一点,在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用(IE8.0中也已经部分地支持了CSS3,dudo注),但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验,因此我认为了解一下CSS 3新增选择符是如何使用还是有益处的。
本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在CSS的第3个版本中出现,但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿,那么现在你应该再去看一下是不是已经出现了最新版本了。
这里我不打算去解释CSS选择符工作的基本原理。如果你想重要复习一下的话,最好从《细说CSS2.1中的选择符》开始。
首先,快速浏览一下CSS3中新增的选择符:
CSS3选择符语法概览
选择符类型 表达式 描述 子串匹配的属性选择符 E[att^="val"] 匹配具有att属性、且值以val开头的E元素 子串匹配的属性选择符 E[att$="val"] 匹配具有att属性、且值以val结尾的E元素 子串匹配的属性选择符 E[att*="val"] 匹配具有att属性、且值中含有val的E元素 结构性伪类 E:root 匹配文档的根元素。在HTML中,根元素永远是HTML 结构性伪类 E:nth-child(n) 匹配父元素中的第n个子元素E 结构性伪类 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E 结构性伪类 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E 结构性伪类 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E 结构性伪类 E:last-child 匹配父元素中最后一个E元素 结构性伪类 E:first-of-type 匹配同级兄弟元素中的第一个E元素 结构性伪类 E:only-child 匹配属于父元素中唯一子元素的E 结构性伪类 E:only-of-type 匹配属于同类型中唯一兄弟元素的E 结构性伪类 E:empty 匹配没有任何子元素(包括text节点)的元素E 目标伪类 E:target 匹配相关URL指向的E元素 UI元素状态伪类 E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素 UI元素状态伪类 E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素 UI元素状态伪类 E:checked 匹配所有用户界面(form表单)中处于选中状态的元素E UI元素状态伪类 E::selection 匹配E元素中被用户选中或处于高亮状态的部分 否定伪类 E:not(s) 匹配所有不匹配简单选择符s的元素E 通用兄弟元素选择器 E ~ F 匹配E元素之后的F元素

如果对上面的描述还不是很清楚的,请不要担心。本文下面的部分将会对他们进行更加详细的讲解,并且提供例子来演示他们是怎么使用的。

上一页12 3 4 5 下一页 阅读全文
HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 #HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 #HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
You might like
PHP实现邮件群发的源码
2013/06/18 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python 内置函数complex详解
2016/10/23 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python多线程的退出控制实现
2020/08/10 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
班组长岗位职责范本
2014/01/05 职场文书
法人代表委托书
2014/04/04 职场文书
《将心比心》教学反思
2014/04/08 职场文书
企业金融服务方案
2014/06/03 职场文书
军训口号
2014/06/13 职场文书
员工安全责任书范本
2014/07/24 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
入团介绍人意见范文
2015/06/04 职场文书
无工作证明怎么写
2015/06/15 职场文书