CSS3属性选择器怎么用

属性选择器可以根据元素的属性及属性值来选择元素。它的用法是元素后面增加一个中括号,中括号内列出各种属性,或者属性表达式,例如h1[title]、 h1[title=“blog”]等。

在CSS3.0中,增加了3个属性选择器,使得属性选择器有了通配符的概念。

[att*=val]属性选择器

该选择器含义是,如果元素用att表示属性,它的属性值中包含val指定的字符,则该元素使用这个样式,如下面代码所示。

[id*=“sh”]{
font-family: “MS Serif”,“New York”, serif;
color:#76EE00;
text-align: right;
position: statici;}

在HTML5的元素id属性中,包含“sh”字符的,可以采用此样式。

[att^=val]属性选择器

该选择器含义是,如果元素用att表示属性,它的属性值以val指定的字符开头,则该元素使用这个样式。针对上面所述的示例,属性选择器可以修改为“[id^=shm]”。所有符合条件的元素,可以使用这样的样式。

[att$=val]属性选择器

该选择器含义是,如果元素用att表示属性,它的属性值以val指定的字符结尾,则该元素使用这个样式。针对上面所述的示例,属性选择器可以修改为“[id$=shm]”。所有符合条件的元素,可以使用这样的样式。

属性选择器也称为限定性选择器，它根据指定属性作为限定条件来定义元素样式。除了上面提到的3种通配符选择器之外,还包括存在属性匹配、精确属性匹配、空白分隔匹配和连字符匹配4种类型的选择器。