CSS3之属性选择器

先来看一个常用的选择器的例子：

 img[alt] {  border: 3px dashed #e15f5f;  } 

这个选择器会匹配页面标签中任意一个含有 alt 属性的图片标签：

<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />

还可以通过设定属性值来缩小匹配范围：

 img[alt="atwi_oscar"] {  border: 3px dashed #e15f5f;  } 

这样就仅会匹配 alt 属性值为 atwi_oscar 的图片。

以上所说的这些事 CSS2都能搞定。

CSS3给我们带来了三种“子字符串匹配”的属性选择器。

一、CSS3 的子字符串匹配属性选择器

a.“匹配开头”的属性选择器。

“匹配开头”的属性选择器语法如下：

 Element[attribute^="value"] 

在实际使用中，如果我想选择网站中所有 alt 属性值以 film 开头的图片，则对应代码如下：

 img[alt^="film"] {  border: 3px dashed #e15f5f;  } 

b.“匹配包含内容”的属性选择器。

“匹配包含内容”的属性选择器语法如下：

 Element[attribute*="value"] 

在实际使用中，如果我想选择网站中所有 alt 属性值中包含 film 字符串的图片，则对
应代码如下：

 img[alt*="film"] {  border: 3px dashed #e15f5f;  } 

c.“匹配结尾”的属性选择器。

“匹配结尾”的属性选择器语法如下：

 Element[attribute$="value"] 

在实际使用中，如果我想选择网站中所有 alt 属性值以 film 结尾的图片，则对应代码
如下：

 img[alt$="film"] {  border: 3px dashed #e15f5f;  } 

 

干货，赶紧记下来吧，哈哈。