css2.1中的属性选择器(css高手请绕道)

早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html)，也激发了我深入了解css选择器的学习欲望，整理于此以便日后备查

*：匹配任何元素。

例如: *{margin:0}

E：匹配任何E元素。

例如: div{color:red}

E F：匹配E的所有后代F元素。

E > F：匹配E的所有子F元素。这个选择器与上一个选择器的区别是：E F会匹配E标签里面嵌套的所有F标签，而E > F只会匹配E标签里面嵌套的第一层F标签。

说明：(Ie6以上版本支持)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css属性选择器</title> <style type="text/css"> *{color:black;} .cls1 > div {color:red} .cls2 div{color:green} </style> </head> <body> <div class="cls1"> <div class="sub">sub div1 <div>aaa</div> </div> <div class="sub">sub div2 <div>bbb</div> </div> </div> <hr /> <div class="cls2"> <div class="sub">sub div1 <div>aaa</div> </div> <div class="sub">sub div2 <div>bbb</div> </div> </div> </body> </html>

E:first-child：匹配第一个E元素。

说明：IE6以上版本支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>E:first-child</title> <style type="text/css"> .cls1 div:first-child{color:red} </style> </head> <body> <div class="cls1"> <div >我是红色的</div> <div >我是黑色的</div> </div> </body> </html>

E:link，E:visited：分别匹配还没访问过的超链接和已经访问过的超链接。

E:active，E:hover，E:focus：匹配各种用户动作下的E元素。

说明:IE6以上的版本，允许任何元素都可使用:hover等伪类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css属性选择器</title> <style type="text/css"> .cls1:first-child{color:red} .cls1:focus{border:solid 1px #f00} /*-ie8才开始支持-*/ .cls1:hover{background:#ff9} /*-ie7才开始支持-*/ </style> </head> <body> <input type="text" class="cls1"></input> <input type="text" class="cls1"></input> <input type="text" class="cls1"></input> </body> </html>

E + F：匹配与E邻接的下一个F元素。

说明：(可恶的IE不支持-不管是IE的哪个版本都一样) 该选择器还有一个非标准的写法 E ~ F 效果跟E + F一样(但是~的这种写法，IE7,IE8能识别)

E[foo]：匹配设置了foo属性（不管是什么值）的E元素。

E[foo="warning"]：匹配任何foo属性为"warning"的E元素。

E[foo~="warning"]：匹配任何foo属性以空白作为分隔，其中一个值是"warning"的E元素。

E[lang!="en"]：匹配任何lang属性值以"-"作为分隔符，而且第一个精确等于"en"的E元素（也匹配lang属性只有属性值en的元素）。

E[foo*="abc"]:匹配任何有foo属性值，且属性值包含"abc"的E元素。
说明:虽然w3c组织未把该选择器列在标准之中，但是5大浏览器都支持(除IE6及IE6以下版本)，已经是事实标准

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css属性选择器</title> <style type="text/css"> input[class*='cls1']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写)--*/ </style> </head> <body> <input type="text" class="cls1-cls2-cls3" value='cls1-cls2-cls3'></input> <input type="text" class="cls2cls1" value='cls2cls1'></input> <input type="text" class="Cls1" value='Cls1'></input> </body> </html>

E.warning：相当于E[class~="warning"]，匹配任何使用了warning样式类的E元素。

E#myid：相当于E[id='myid']，匹配任何id为myid的E元素。

E:before和E:after ,这是二个很少用的伪类，用于在E元素前后显示一些内容(IE8才开始支持)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>after,before伪类</title> <style type="text/css"> *{font-size:12px;line-height:20px;} .cls1:before{content:"欢迎光临我的网站";display:block;border-bottom:solid 1px #ccc;line-height:25px;} .cls1:after{content:"版权所有 2009";display:block;border-top:solid 1px #ccc;line-height:25px;} </style> </head> <body> <p class="cls1">这是一段文字，演示伪类的用法，只有在IE8或Safari,Chrome,FireFox,Chrome,Opera上才能看见before,after的内容</p> </body> </html>

以上属性选择器可以在http://www.w3.org/TR/CSS2/selector.html查到官方权威信息

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。