[分享]css3属性选择器有哪些属性

CSS3属性选择器用来选取匹配特定属性值的元素，应用相应的样式。下面将介绍几种常见的CSS3属性选择器和其用法。/ 选择属性值等于特定值的元素 / p { fontweight: bold; } / ...

CSS3属性选择器用来选取匹配特定属性值的元素，应用相应的样式。下面将介绍几种常见的CSS3属性选择器和其用法。

/* 选择属性值等于特定值的元素 */
p[title="example"] {
  font-weight: bold;
}

/* 选择属性值包含特定字符串的元素 */
a[href*="google"] {
  color: red;
}

/* 选择属性值以特定字符串开头的元素 */
img[src^="/images"] {
  border: 1px solid black;
}

/* 选择属性值以特定字符串结尾的元素 */
a[href$=".pdf"] {
  background-color: yellow;
}

/* 选择属性值中包含指定单词的元素 */
input[type~="radio"] {
  margin: 10px;
}

/* 选择属性值以指定字符串为开头且后面为"-"分隔符的元素 */
div[class|="example"] {
  background-color: gray;
} 

以上是常用的CSS3属性选择器的使用方法，通过这些选择器可以精确地匹配所需的元素，并应用相应的样式。需要注意的是，如果要兼容IE8及以下版本，部分选择器需要特殊处理。