[分享]css3属性选择器、

在CSS中，属性选择器是一个非常实用的功能。它们允许你根据元素的属性来选择元素，而不是根据元素名称或类选择器。其中最常见的属性选择器包括：等于，包含，开始于和结束于。/ 选择所有具有datacusto...

在CSS中，属性选择器是一个非常实用的功能。它们允许你根据元素的属性来选择元素，而不是根据元素名称或类选择器。其中最常见的属性选择器包括：等于，包含，开始于和结束于。

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

/* 选择所有data-custom属性的值等于blue的元素 */
[data-custom=blue] {
  color: blue;
}

/* 选择所有data-custom属性的值包含word的元素 */
[data-custom*=word] {
  color: green;
}

/* 选择所有data-custom属性的值以http开头的元素 */
[data-custom^=http] {
  color: purple;
}

/* 选择所有data-custom属性的值以.jpg结尾的元素 */
[data-custom$=.jpg] {
  color: orange;
} 

不仅如此，还可以配合伪类使用。例如，我们可以在鼠标悬停在一个段落上时改变该段落背景颜色，在悬停结束后恢复原来的样式。

/* 选择所有带有data-hover属性的段落 */
p[data-hover] {
  background-color: gray;
}

/* 当鼠标悬停在具有data-hover属性的段落上时改变背景颜色 */
p[data-hover]:hover {
  background-color: black;
} 

使用属性选择器可以简化CSS代码，使其更加精练和易于维护。无论您是否是CSS新手，使用它们都是一个非常有益的技巧。