提升你设计水平的CSS3新技术[译](2)
作者:暴风彬彬 来源:彬go 发布时间:2009-08-02 20:51:00
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如,给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:
div~img {
border: 1px solid #ccc;
}
浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6!
伪类
或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的:
:nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组,你可以简单的这样使用::nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
:nth-last-child(n)
与上个选择器的思想同样,但是从后面匹配元素(倒序),比如,为了指定一个div里面的最后两个段落,我们可以使用下面的选择器:div p:nth-last-child(-n+2)
:last-child
匹配一个父节点下的最后一个子元素,等同于:nth-last-child(1):checked
匹配选择的元素,比如复选框:empty
匹配空元素(没有子元素)。:not(s)
匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:p:not([class*="lead"]) { color: black; }
.
Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:
#primary .text p:last-child {
margin: 0;
}
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。
浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读
猜你喜欢
- 相信大家从去年圣诞节开始,逐渐发现淘宝网首页的标志开始有了新的形式,从过往的静态图片节日LOGO变成了FLASH的动画小故事LO
- 方法如下: response.cookies(cookiesname)[(key)|.attribute]=value 解释如下:cooki
- 可能许多同学对SQL Server的备份和还原有一些了解,也可能经常使用备份和还原功能,我相信除DBA之外我们大部分开发员队伍对备份和还原只
- 有这么一个题目,说bt其实也不bt,为了重点突出其中的意图,特意加上了括号:var a = (++Math.P
- 欣赏上一篇:用画为5.12地震受灾同胞们祈福 今年我们的祖国多灾多难 雪灾的阴影还没散去又发生了地震。中国插画 * 举办5.12地震祈幅绘画活
- 场景一:A网站全站均为UTF-8编码,B网站全站为GB2312编码。A网站提供一段JS代码供B网站调用,该代码会动态生成一个FORM表单,以
- Index.asp:程序代码<html><head><meta http-equiv="Conten
- 英文原文:The seven rules of Unobtrusive JavaScript原文地址:http://icant.co.uk/
- 如何显示存储在BLOB字段中的图像?showimges.asp' 在浏览器上单独显示图像 <%@ 
- javascript可以根据输入值自动搜索显示相关的select列表,对于列表很长时可以很方便的查找到要的值。js代码:<script
- MySQL的本地备份和双机相互备份脚本:首先,我们需要修改脚本进行必要的配置,然后以root用户执行。◆1. 第一执行远程备份时先用 fir
- 上一篇介绍了 HTML5 中 Canvas 的基本概念,这篇将要介绍一下 Canvas&n
- 快照复制是在数据库之间对数据以及数据库对象进行复制并进行同步,以确保多个数据库之间一致性的一个法宝。简单的说,快照复制就是实现把一个数据库服
- 在我们建立一个数据库时,并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时,尤其是在进行数据检验、净化和转换时,将会面临很大
- 表示文字链接最清楚的方式是“蓝色文字+下划线”,这是在浏览器发展过程中形成的。这个问题大家都说过很多次了,我也曾经说过。然而,这样的规范却总
- 由于笔者最近在做一个跨数据库操作的测试,开始做IBatisNet (IBatis.DataMapper.1.6.2/IBatis.DataA
- Logminer是每个Dba都应熟悉的工具,当一天由于用户的误操作你需要做不完全的恢复时,由于你无法确定这个操作是哪个时间做的,所以这对你的
- 问: 如果数据表中有时间字段,现在要迁移到其他时区的服务器上,该如何处理呢?答:在高版本的mysqldump中,新增了一个选项:--tz-u
- '*************************************************'函数名:getMaxO
- Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正