详解CSS3中的属性选择符(3)
作者:dudo 来源:dudo says 发布时间:2008-04-24 14:30:00
:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框:
input:checked { border:1px solid #090; }
UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。
要注意的是,许多浏览器对于开发者对表单控件样式的改变有着严格的限制。更多关于这方便的内容可以我的两篇文章:《样式化表单控件》和《样式化更多表单控件》。
结构性伪类
结构性伪类允许开发者根据文档树中表明的结构来指定元素,而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大,但是不幸的是现代浏览器仅提供了有限的支持。
:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中,文档的根元素始终是HTML,也就是说现在的两条规则其实是一样的(大体上说来:root要比html更专业点)。
:root { background:#ff0; }
html { background:#ff0; }
:NTH-CHILD()伪类
:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数,可以是一个数字,也可以一个关键字或者一个公式。
数字b指是的第b个子元素。下面的规则将会应用到父元素下所有p元素中的第三个中:
p:nth-child(3) { color:#f00; }
关键字odd(奇数)和even(偶数)可以用来匹配序号为奇数或者是偶数的子元素。第一个元素的序号为1,因为下面的规则将会匹配第1、3、5...了子元素p:
p:nth-child(odd) { color:#f00; }
下面的规则则匹配第2、4、6...个字元素p:
p:nth-child(even) { color:#f00; }
表达式an+b可以用来创建更加复杂的循环模式。在表达式中,a代表步长,n是一个从0开始的计数器,b代表偏移量。其中,所有的数值都必须是整数(这里,n是从0开始的,和js等中的循环不同的是,至于到多少结束取决于元素的个数决定,如文档中有20个元素,3n(n=1,2...)就会分别选择第3、6、9、...18个元素,n此时为6 ,dudo注)。为了更好理解如何使用表达式我们先看几个代码实例:
下面的规则将会匹配序号数为3的倍数的所有p元素。在第一行中,b等于0,因此可以忽略不写(见第二行):
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
偏移量可以用来指定样式的循环是从哪个元素开始应用的。如果有一个20行的表格,我们希望从第10行以后的奇数行开始使用不同的背景颜色,就可以使用下面这条规则:
tr:nth-child(2n+11) { background:#ff0; }
由于n是从为开始的,因此第一个受影响的tr元素的序号是11(2*0+11=11,dudo注)。接下来就是第13行(2*1+11=13)再接下来就第15行(2*2+11=15),以此类推。
更详细介绍请参照CSS 3选择符中的《nth-child()伪类》。
那么,对于这样有用的一个选择符又有哪些浏览器支持它呢?很糟糕,据我所知,没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正(Firefox3和IE8目前是否支持?dudo)
猜你喜欢
- JavaScript中的XMLHttpRequest和XML DOM首先,我们需要建立一些规则。特殊的XMLHttpRequest对象和一般
- 年前帮manager 招GUI设计实习生 (PS. 这个实习生职位依然open,欢迎有兴趣的同学来投,邮箱jj.ying [at] hp.c
- 最近一直在研究 Javascript 相关的技术。在《Javascript 高级程序设计》有篇章节着重阐述了优化 Javascri
- 1.表达式操作符Table 1 算术操作符操作符 语法 含义+ a + b 相加 - a - b 相减 - - a
- 应该是很方便的了,支持几乎所有主流浏览器(ie5,6,7,8;ff;傲游;Opera)已更新至可提交录入内容<script type=
- 【1】 以XML 返回 (1)未定义属性的 select logisticsId,logisticsName from LogisticsC
- 1、信息表新建立一个字段,并用0、1的方法判断信息的状态。 2、新建一个页面,定时刷新,并查询表中是否有字段值为0的记录。 3、当管理员点击
- Introduction简介So what is POSH? No, it's not just some new clothing
- ASP实例代码,利用SQL语句动态创建Access表。留作参考,对在线升级数据库有用处.<% nowtime = now()
- 关于采集-防采集的我想大家都很清楚。这个就不多说,采集最终还是从页面源代码入手,所以只要没有规律想采集就难!由于一天自己在策划某个网站的时候
- 1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接、外联接和交叉联接等。如果我们想
- 网上广泛流传的取 object 的绝对位置的做法是:var getAbsPos = function(pTar
- 1. 不要让用户先注册再去选商品。顾客们是来买东西的,不是来填表单的。所以需要确保用户在付款过程中完成了注册,而不是付款前就去注册,也不是让
- 如何用SQLMail建立一个电子刊物自动处理系统?下面我们用SQLMail来做一个电子刊物自动处理系统。在这个系统中,主要实现两个功能:1、
- 1.5 学习ASP.net 的过程中如何求助--加入 ASPNG 讨论列表 Charles Carroll 作为不断壮大的 ASP.NET
- 任何一个行业里,当有一头近乎垄断的大象盘踞着的时候,生活在大象身后的蚂蚁们既是悲哀又是幸运的。悲哀的是市场已近乎被大象垄断留给他们的空间已经
- ORACLE访问SQL SERVER数据库有一篇《Oracle 异构服务实践》讲得很清楚。但里面没有讲如何设置访问多个SQL Server数
- 一、分工和流程在土豆网,以项目开发为核心,谁都可以带项目,担任项目经理。一个典型的土豆网项目中,当进入正式开发阶段,通常参与者包括:1名设计
- 使用 WinHttpRequest 伪造 HTTP 头信息,伪造 Referer 等信息。由于微软封锁了 XmlHttp 对象,所以无法伪造
- 阅读是在网站中的一个很重要的部分,可以说是网站的核心。网站最终要呈现给用户的就是内容。尤其是文本内容。豆瓣豆瓣前段时间小改了一下,页面拉宽,