css属性选择器实现以下样式

在 CSS 中，属性选择器是一种用于选择具有特定属性值的元素的选择器。使用属性选择器，我们可以实现许多有趣的样式效果。

/* 选择所有带有 data-color 属性的元素 */
[data-color] {
  color: red;
}

/* 选择所有带有 data-color 属性且属性值为 red 的元素 */
[data-color="red"] {
  color: red;
}

/* 选择所有带有 href 属性的 a 元素 */
a[href] {
  text-decoration: none;
}

/* 选择所有带有 title 属性，且属性值以 "图片" 结尾的 img 元素 */
img[title $= "图片"] {
  border: 1px solid black;
}

/* 选择所有带有 target 属性，且属性值包含 "_blank" 的 a 元素 */
a[target *= "_blank"] {
  background-color: yellow;
}

通过属性选择器，我们可以轻松地实现以上样式效果。它使得我们不必通过类名或者 ID 来控制样式，而是直接通过元素的属性来选择。