Tagged

选择器

A collection of 7 posts

css

Css选择器命名规则

操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器:所有浏览器. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式.. 一、关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(

css3

有用的:nth-child秘方

译自:Useful :nth-child Recipies 中文:有用的:nth-child秘方 请尊重版权,转载请注明来源,多谢! 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则! 在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。 只选择第五个元素 li:nth-child(5){ color: green; } 要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。 选择除了前面的五个之外的所有元素 li:nth-child(n+6){ color: green; } 如果有超过10个元素,它将会选中超过5个。 只选择前面的5个 li:nth-child(-n+5){ color: green; } 从开始的那个,选择每第四个 li:nth-child(

css3

在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的制作高可维护性的页面。 然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过,虽然我们无法左右浏览器的市场份额,却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术,让IE可以变相支持CSS3选择器。 一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。 用法 你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入,如下: 支持的选择器 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty ie-css3的一些限制 样式表必须通过标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件; 样式表文件必须和页面放在同一个域名下面; 使用file://路径的样式文件将由于浏览器的安全问题而不起作用; :not()选择器尚不支持; 该方法不是动态的,样式被应用之后再改变DOM,将会无效。 如何工作的?

css3

IE9初窥:支持CSS3,和HTML5?

微软昨天在其2009年专业开发者大会上展示了下一个版本的Internet Explorer浏览器IE9。 尽管只是一个早期版本,IE开发团队还是比较高调的宣布了IE9的一些改进,比如速度比之前的IE版本都更快些,缩小与FF和webkit之间的差距(也就是还是赶不上了?),支持CSS3的一些新特性,比如圆角(border-radius),不过现在还不清楚是原生支持还是使用私有属性-ms-border-radius。可喜的是,IE9已经可以支持大部分CSS 选择器了!IE开发团队展示了IE9在css3.info的一个CSS选择器的测试页面的测试结果,结果如下图显示: 测试结果显示,IE9支持43个选择器中的41个(另外两个中一个有bug,一个不支持),在578项测试中通过了574项,这是IE浏览器历史上最大的进步…… 虽然微软之前宣布将支持HTML5,但是此次IE开发团队并未给出一个明确的答案,据说,关于是否支持HTML5,他们还在讨论中…… 另外在Windows 7中引入的direct2D和directWrite等GPU硬件加速技术,也将在IE9中使用。 好吧,事实上,从泄漏出的这些信息可以看出来,IE9相对于IE8,无论在速度还是性能,以及对网站标准的支持,都有很大很大的进步。但是我们或许可以预见:将来某个时候发布的微软的IE9浏览器,已经远远落后于现在的firefox和chrome/safari了! 但是无论如何,前端观察都会一直关注微软的动静,毕竟大蛋糕在人家手里——这是一个杯具…… 欲了解更多信息,可查阅IE团队博客的介绍。

css

征服高级CSS选择器

原文:征服高级CSS选择器 译自:Taming Advanced CSS Selectors 版权所有,转载请注明出处,多谢!! CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于指定的元素而不用使用额外的class或id,而且通过这种方式也可以让我们的代码和样式更加灵活。 CSS的优先级 在深入研究高级CSS选择器领域之前,理解CSS优先级是如何工作的是很重要的,这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题 当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器,我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。 那么你如何计算指定选择器的优先级?如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1 第一个数字(a)通常就是0,除非在标签上使用style属性;

css

CSS选择器的浏览器支持

我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。之前我也写过一篇《使用CSS选择器创建个性化链接样式 》,作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以及我自己平时总结的一些tips。 熟悉jQuery的人可能都知道,jQuery的灵魂就是它的选择器,同样我认为选择器是css最强大的功能之一,在不久的将来也会得到重视。jQuery的选择器功能得益于CSS3选择器提供的灵感,却是目前兼容性和易用性最好的选择器,而CSS的选择器不能普及,就是因为某些浏览器在拖后腿。 现在就查看《CSS选择器的浏览器支持》吧! 综合测试结果,可以得出以下结论: webkit内核浏览器和Opera浏览器对CSS选择器的支持最好,Chrome所有版本的浏览器均完全支持,Safari3.2版本以上浏览器也完全支持,Opera9.6+浏览器也完全支持CSS选择器; Safari3.0以下浏览器、Firefox 2.0以下浏览器、IE8基本支持CSS2.1选择器,基本上不支持CSS3选择器。可喜的是IE8浏览器有了里程碑的进步,基本很完全的支持了CSS2.1选择器,但是依然不完全支持伪元素; IE6是最落后的浏览器,它竟然连CSS1的选择器都不能完全支持! 很多IE6的粉丝朋友常常问我,你为什么那么讨厌IE6,然后我就要费尽口舌的回答他们,现在好了,有了这个表,我们可以理直气壮的BS

css

使用CSS选择器创建个性化链接样式

我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用的技术,通过它们,我们可以很容易的实现某些效果。今天我们通过制作个性化链接样式来介绍一下CSS的属性选择器。 先看一下演示吧: 正如上图中看到的那样,我们为每种链接定义了不同的样式:当链接a的href属性的值为"mailto"邮件链接的时候,在该链接后面显示一个邮件的图标;当链接为word文件时,后面显示word文档图标;当链接地址为mp3的时候,显示音乐播放图标;当链接地址包含"qianduan.net"的时候,就显示一个首页图标…… 其实实现这样的功能非常容易,我们先来看看CSS的属性选择器的语法: 语法用法css版本[att=val]属性"att"值为"val"的元素css 2.1[att]包含"att"属性的元素css 2.1[att|=val]匹配所有att属性具有多个连字号分隔(