使用 CSS 属性选择器的高级样式

2025-06-07

使用 CSS 属性选择器的高级样式

CSS 代码片段

CSS 是我们又爱又恨的朋友。喜欢 CSS 的另一个原因是它允许你使用元素的属性来选择元素。

常用于样式设置的属性是“class”和“id”。在本文中，我将向您展示如何使用其他属性及其指定的值来定位特定元素。

[属性] 选择器

[属性] 选择器选择具有指定属性的元素。

例子

img[alt] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

上述选择器仅针对包含“alt”属性的图像，因此具有“alt”属性的图像将具有黄色边框。

<img src="./../../images/dog.png" alt="cute white dog"/> // ✅ Selected, has yellow border
<img src="./../../images/cat.png"/>// ❌ not selected, no border
Enter fullscreen mode Exit fullscreen mode

[attribute="value"] 选择器

[attribute="value"] 选择器选择包含具有精确指定值的特定属性的元素。

属性值字符串默认区分大小写，但可以通过在右括号前添加“i”更改为不区分大小写，如下所示：

img[alt="paper"] { //Case sensitive
  border: 2px solid yellow;
}

img[alt="PapEr" i] {  //Case insensitive
  border: 2px solid yellow;
}

The selectors above target the same elements.
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/paper.png" alt="paper"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

上述选择器仅针对包含“alt”属性且值为“paper”的图像。

[attribute*="value"] 选择器

[attribute*="value"] 选择器用于选择任意位置属性值包含指定值的元素。

img[alt*="ter"] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/paper.png" alt="alter"/> // ✅ Selected, has yellow border
<img src="./../../images/paper.png" alt="termite"/> // ✅ Selected, has yellow border
<img src="./../../images/paper.png" alt="flattering"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

[attribute~="value"] 选择器

[attribute~="value"] 选择器用于选择属性值包含指定单词的元素。

img[alt~="coin"] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/man.png" alt="coin collector"/> // ✅ Selected, has yellow border
<img src="./../../images/office.png" alt=" Buycoins Headquaters"/> // ❌ not selected, no border
Enter fullscreen mode Exit fullscreen mode

[attribute^="value"] 选择器

[attribute^="value"] 选择器用于选择属性值以指定值开头的元素。

img[alt^="hat"] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/hat.png" alt="hat"/> // ✅ Selected, has yellow border
<img src="./../../images/ronaldo.png" alt="hatrick"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

[属性|="值"] 选择器

[attribute|="value"] 选择器用于选择具有指定属性且以指定值开头的元素。在这种情况下，值必须是整个单词或以连字符分隔的单词的第一个单词。

img[alt|="front"] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/linda.png" alt="front-end-developer"/> // ✅ Selected, has yellow border
<img src="./../../images/linda.png" alt="frontend-developer"/> // ❌ not selected, no border
<img src="./../../images/location.png" alt="front"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

[attribute$="value"] 选择器

[attribute$="value"] 选择器用于选择属性值以指定值结尾的元素。该值不必是整个单词。

img[alt$="tion"] {
  border: 2px solid yellow;
}
Enter fullscreen mode Exit fullscreen mode

例子

<img src="./../../images/banner.png" alt="education"/> // ✅ Selected, has yellow border
<img src="./../../images/linda.png" alt="hand-lotion"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

阅读其他文章

文章来源：https://dev.to/lindaojo/advanced-styling-using-css-attribute-selectors-2pkh
Devto 翻译
PREV
5 个令人印象深刻的 React 组件
NEXT
2025 年学习 Golang，你不会后悔