也许你还不知道的十二种css特殊选择器

一、X:link X:visited X:hover X:active 伪类


a:link { color: red; }

a:visted { color: purple; }

伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式。三种伪类选择器常用于链接,但不是说只适用于链接,可惜的是IE6只支持将这三种伪类选择器作用于链接。

这里明河说明一点,由于CSS优先级的关系(后面比前面的优先级高),这几个伪类的书写顺序,一般是link、visted、hover、active。

二、X + Y 相邻选择器


ul + p {

color: red;

}

相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配一个元素)

三、X > Y 子选择器

子选择器,留意X > Y与X Y的区别,后者是子孙选择器,即无视层级,而X > Y是字选择器,只匹配X下的子元素Y。

从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。

四、X ~ Y 相邻选择器



ul ~ p {

color: red;

}

相邻选择器,与X+Y类似,不同的是X ~ Y匹配的是元素集合,比如上述代码,匹配的是所有ul相邻的p

五、X[title] 属性选择器



a[title] {

color: green;

}

属性选择器,比如上述代码匹配的是带有title属性的链接元素。

六、X[title=””] 另一种属性选择器



a[title=”rockscrusher.com”]{

color:#096;

}

属性选择器,上述代码不只匹配带有title属性,更匹配title属性等于”rockscrusher.com”的链接元素。[]内不只可用title属性,还可以使用其他属性。

七、X[title*=””] 模糊匹配属性选择器



a[title*=”crusher”]{

color:#096;

}

加了*号,意味着是模糊匹配,比如上述代码,会匹配title属性为cusher或crusher machine等带有crusher的链接属性。

八、X[title^=””] 另一种模糊匹配属性选择器



a[title^=”crusher”]{

color:#096;

}

模糊匹配,与*的作用相反,^起到排除的作用,比如上述代码,会匹配title属性不带有crusher的链接属性。

九、X[href$=””] 很实用的属性选择器



a[href$=”.png”] {

color: red;

}

在属性选择器中多一个$符号,用于匹配结尾为特定字符串的元素,比如上述代码匹配的就是href属性值的结尾为.png的链接。

十、X[data-*=””] 不太常用的属性选择器



a[data-filetype=”image”] {

color: red;

}

data-filetype这个属性目前用的实在不多,但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接,如果使用X[href$=””]的方式如下:



a[href$=”.jpg”],

a[href$=”.jpeg”],

a[href$=”.png”],

a[href$=”.gif”] {

color: red;

}

而使用data-filetype,只要:



a[data-filetype=”image”] {

color: red;

}

当然前提是你给每一个链接加上data-filetype属性。

十一、X[foo~=””] 非常少用的选择器



a[data-info~=”external”] {

color: red;

}

a[data-info~=”image”] {

border: 1px solid black;

}

这也是非常少用的选择器,加上~号,有一种情况特别适用,比如你有个data-filetype=”external image”属性,这时候我希望分别针对external和image样式控制。



a[data-info~=”external”] {

color: red;

}

a[data-info~=”image”] {

border: 1px solid black;

}

上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。

十二、X:checked 另一种伪类选择器



input[type=radio]:checked {

border: 1px solid black;

}

这个伪类选择器只用于匹配带有checked属性的元素,比如radio、checkbox即单选框和多选框。目前这个伪类选择器,IE9下都不支持,非IE浏览器基本上都支持。