分类: 系统运维
2012-01-06 17:15:20
原文:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html(30个最常用CSS选择器解析)
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。
1. * * {属性选择器。比如上述代码匹配的是带有title属性的链接元素。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"] a[href=""] {属性选择器。 上面的代码匹配所有拥有href属性,且href为的所有链接。
这个功能很好,但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢?看下一个选择器。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"] a[href*="css9.net"] {属性选择器。正如我们想要的,上面代码匹配的是href中包含"css9.net"的所有链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"] a[href^="http"] {属性选择器。上面代码匹配的是href中所有以http开头的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
14. X[href$=".jpg"] a[href^="http"] {属性选择器。在属性选择器中使用$,用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。(注意,这里仅仅是.jpg图片,如果要作用于所有图片链接该怎么做呢,看下一个选择器。)
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
15. X[data-*="foo"]在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现,需要这样做:
a[href$=".jpg"],看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性,例如‘data-file’
html代码
图片链接css代码如下:
a[data-filetype="image"] {这样所有链接到图片的链接字体颜色为红色。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
16. X[foo~="bar"]属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子:
html代码
Click Me, Foolcss代码
a[data-info~="external"] {在上面例子中,匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
17. X:checkedchecked伪类用来匹配处于选定状态的界面元素,如radio、checkbox。
input[type=radio]:checked {上面代码中匹配的是所有处于选定状态的单选radio,设置1px的黑色边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before这两个伪类与content结合用于在元素的前面或者后面追加内容,看一个简单的例子:
h1:after {content:url(/i/logo.gif)}上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动,写法如下:
.clearfix:after {:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是,在ie 6中,:hover只能用于链接元素。
这里分享一个经验,在设定链接划过时出现下滑线时,使用border-bottom会比text-decoration显得更漂亮些。代码如下:
a:hover {兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector) div:not(#container) {否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式:
p::first-letter {下面的代码中设定了段落中第一行的样式:
p::first-line {兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
(IE6竟然支持,有些意外啊。)
22. X:nth-child(n) li:nth-child(3) {这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中,设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法,在下面例子中设定第偶数个元素的样式,可以用它来实现隔行换色:
tr:nth-child(2n) {兼容浏览器:IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n) li:nth-last-child(2) {与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n) ul:nth-of-type(3) {与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)ul:nth-last-of-type(3) { border: 1px solid black; }
与X:nth-of-type(n)功能类似,不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:
ul:nth-last-of-type(3) {兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child ul > li:last-child {与:first-child类似,它匹配的是序列中的最后一个元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child div p:only-child {这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
My paragraph here.
Two paragraphs total.
Two paragraphs total.
在上面代码中第一个div中的段落p将会被匹配,而第二个div中的p则不会。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type li:only-of-type {这个伪类匹配的是,在它上级容器下只有它一个子元素,它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type:first-of-type伪类与:nth-of-type(1)效果相同,匹配出现的第一个元素。我们来看个例子:
My paragraph here.
在上面的html代码中,如果我们希望仅匹配List Item 2列表项该如何做呢:
方案一:
ul:first-of-type > li:nth-child(2) {方案二:
p + ul li:last-child {方案三:
ul:first-of-type li:nth-last-child(1) {兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera。
总结:如果你正在使用老版本的浏览器,如IE 6,在使用上面css选择器时一定要注意它是否兼容。不过,这不应成为阻止我们学习使用它的理由。在设计时,你可以参考浏览器兼容性列表,也可以通过脚本手段让老版本的浏览器也支持它们。
另一点,我们在使用javascript类库的选择器时,例如jquery,要尽可能的使用这些原生的css3选择器,因为类库的选择器引擎会通过浏览器内置解析它们,这样会获得更快的速度。
原文: