用CSS3将你的设计带入下个高度[译](2)
作者:神采飞扬 来源:前端观察 时间:2009-06-22 13:03:00
1. 选择器
CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。
属性选择器
三个新的属性选择器被添加到CSS3:
[att^="value"]
匹配包含以特定的值开头的属性的元素[att$="value"]
匹配包含以特定的值结尾的属性的元素[att*="value"]
匹配包含含有特定的值的属性的元素
tweetCC 使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如,给某个特定的div
的同级的图片添加一个灰色的边框(div
和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:
div~img {
border: 1px solid #ccc;
}
浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6!
标签:设计,css3,hack,工具
0
投稿
猜你喜欢
动网论坛的asp 数据库连接代码
2011-04-06 10:32:00
SQL Server asp.net 数据提供程序连接池
2009-09-18 08:18:00
IE 8 提出“超级标准模式”
2008-01-24 19:26:00
MySQL Explain命令用于查看执行效果
2009-02-27 15:30:00
如何实现网上站点维护?
2010-05-24 18:35:00
CSS雪碧:要还是不要?
2009-11-16 13:01:00
JavaScript画圆
2010-01-22 15:57:00
asp如何从数据库中调出个人档案?
2009-11-15 20:02:00
SQL学习笔记五去重,给新加字段赋值的方法
2011-09-30 11:53:28
javascript中css的float特殊写法
2007-12-24 20:24:00
JQUERY新手学习笔记
2008-09-28 12:43:00
完美解决MySQL中文乱码
2011-03-16 15:16:00
微软证实最新的关键SQL Server漏洞
2008-12-23 13:31:00
流动的线条 —— 中国汉字书法之美
2009-10-30 18:15:00
HTML,CSS和JavaScript速查表
2010-09-16 13:02:00
交互设计杂七杂八
2010-09-25 18:41:00
验证码-挑战你的智慧
2008-09-10 13:08:00
理解 SQL Server 中系统表Sysobjects
2009-01-20 15:13:00
用JavaScript判断字符串长度
2009-10-29 12:15:00
如何做一个可以让人家申请使用的计数器?
2010-07-11 21:17:00