[分享]css3属性值任意匹配

CSS3属性值任意匹配可以帮助我们在样式之间建立更加灵活的联系，使得我们可以更好地进行样式的管理。下面我们来看看这个特性的使用方法。/ 匹配拥有data属性的任意元素 / { color: red;...

CSS3属性值任意匹配可以帮助我们在样式之间建立更加灵活的联系，使得我们可以更好地进行样式的管理。下面我们来看看这个特性的使用方法。

/* 匹配拥有data-属性的任意元素 */
*[data-] {
  color: red;
}

/* 匹配id以"box_"开头的任意元素 */
[id^="box_"] {
  border: 2px solid #ddd;
}

/* 匹配class包含"button"的任意元素 */
[class*="button"] {
  padding: 10px;
}

/* 匹配src属性以".jpg"或".png"结尾的任意img元素 */
img[src$=".jpg"], img[src$=".png"] {
  width: 100%;
} 

上述代码中使用了以下四种属性值匹配方式：

1. [data-]：匹配所有拥有data-属性的元素；

2. [id^="box_"]：匹配所有id以"box_"开头的元素；

3. [class*="button"]：匹配所有class包含"button"的元素；

4. [src$=".jpg"], [src$=".png"]：匹配所有src属性以".jpg"或".png"结尾的img元素。

使用这些任意匹配属性值，可以帮助我们更方便地选取页面上的元素，使得样式的管理更加灵活和精细化。同时，这也是CSS3相比于CSS2的一个重要进步之处。