[分享]css3属性选择器案例

在CSS3中，属性选择器是十分强大的一种选择器，它可以根据元素的属性来进行选择，使得代码的灵活性和可读性大大提高。下面我们就来看一下属性选择器的一些常见的使用案例。/ 这个选择器可以选中所有type属...

在CSS3中，属性选择器是十分强大的一种选择器，它可以根据元素的属性来进行选择，使得代码的灵活性和可读性大大提高。下面我们就来看一下属性选择器的一些常见的使用案例。

/* 这个选择器可以选中所有type属性为text的文本框 */
input[type="text"] { 
  border: 1px solid #ccc;
}

/* 这个选择器可以选中所有href属性以http开头的链接 */
a[href^="http"] { 
  color: blue;
}

/* 这个选择器可以选中所有href属性以.pdf结尾的链接 */
a[href$=".pdf"] { 
  color: red;
}

/* 这个选择器可以选中所有alt属性包含apple的图片 */
img[alt*="apple"] { 
  border: 1px solid green;
} 

通过上面的几个案例，我们可以发现，属性选择器非常适合用于对于某一类元素的设置，可以精确地选择到我们所需要的元素，达到代码简洁和可读性高的目的。