[分享]css3属性选择器总结

CSS3引入了属性选择器，可以根据元素的属性来匹配元素。属性选择器使用方括号包裹属性名和属性值来指定选择器。/ 匹配所有含有class属性的元素 / { / 样式 / } / 匹配所有class属性值...

CSS3引入了属性选择器，可以根据元素的属性来匹配元素。属性选择器使用方括号[]包裹属性名和属性值来指定选择器。

/* 匹配所有含有class属性的元素 */
[class] {
  /* 样式 */
}

/* 匹配所有class属性值中包含特定单词的元素 */
[class~="word"] {
  /* 样式 */
}

/* 匹配所有属性值以特定字符串开头的元素 */
[class^="prefix"] {
  /* 样式 */
}

/* 匹配所有属性值以特定字符串结尾的元素 */
[class$="suffix"] {
  /* 样式 */
}

/* 匹配所有属性值包含特定字符串的元素 */
[class*="substring"] {
  /* 样式 */
}

/* 匹配所有属性值等于特定字符串的元素 */
[class="value"] {
  /* 样式 */
} 

以上是常用的属性选择器，通过这些选择器可以更加精确地选择想要的元素并对其进行样式设计。