属性选择器

前几篇博客写了一些关于IE6的事情,原本IE6不支持大多数属性选择器,但是我们有了对付他的办法就可以放心的使用属性选择器在我们的样式表中了,那就一起研究一下吧:

a[href]  选择所用含有href属性的a标签

a[href='http://w3.org/']  选择所有含有链接“http://w3.org/”的a标签,注意上面的匹配是严格对比,区分大小写

div[class~='panel']  选择所有被指定class包含panel的div标签,如果不加~就成为了上一条规则,class="panel weather"的div是不被选择的,结合以空格指定的多值属性可以更丰富的使用该方法,如table[summary~="data"]对<table summary="data swa">就会发生作用

img[alt*='a'] 只要img的alt属性中含有a字母,就可以被匹配

img[alt^='a'] 只要img的alt属性以a字母开头,就可以被匹配,可以用于检测链接类型

img[alt$='a'] 只要img的alt属性以a字母结尾,就可以被匹配,可以用于检测链接的文件类型

div#header 这个最常见,匹配id是header的div

dl > dt 子元素,而非任意后代元素,模拟子元素选择器:div#main div{border:1px solid gray;},div#main * div {border:none;},注意,这种模拟只能针对非继承样式。

h2 + p 匹配h2后紧跟的p(同一父级下),如果有其他元素间隔,将匹配失败

h2 ~ p 匹配与h2同级的p,(同一父级下),注:包括相邻的p,千万不要受网上某些文章误导。

 h2 ~ p:before{ content:'ItemP';}  在标签前添加文字,是脱离文档的

 h2 ~ p:after{ content:'ItemP';} 同上

CSS选择器的浏览器支持速查表:http://labs.qianduan.net/css-selector/

posted @ 2013-01-10 21:50  龙则  阅读(169)  评论(0编辑  收藏  举报