css 属性选择器详解和示例

CSS属性选择器是一种用于选择具有特定属性值的元素的CSS选择器。以下是一些常见的属性选择器及其示例：

1. [attribute]: 选择具有指定属性名的元素

例如，选择所有具有“data-”属性的元素：

[data] {
  /* CSS样式 */
}

2. [attribute=value]: 选择具有指定属性值的元素

例如，选择所有具有“data-category='fruit'”属性的元素：

[data-category='fruit'] {
  /* CSS样式 */
}

3. [attribute~=value]: 选择具有包含指定值的属性值的元素

例如，选择所有具有“class”属性且包含“btn”的元素：

[class~=btn] {
  /* CSS样式 */
}

4. [attribute^=value]: 选择具有以指定值开头的属性值的元素

例如，选择所有具有“href”属性且以“https://”开头的元素：

[href^='https://'] {
  /* CSS样式 */
}

5. [attribute$=value]: 选择具有以指定值结尾的属性值的元素

例如，选择所有具有“src”属性且以“.png”结尾的元素：

[src$='.png'] {
  /* CSS样式 */
}

6. [attribute*=value]: 选择具有包含指定值的属性值的元素

例如，选择所有具有“alt”属性且包含“logo”的元素：

[alt*='logo'] {
  /* CSS样式 */
}

这些属性选择器可以在CSS中用于选择特定的元素，以便对它们应用样式或操作它们的行为。