CSS 中的属性选择器

原创已于 2022-02-23 17:42:49 修改 · 2.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-02-23 17:41:54 首次发布

本文详细介绍了CSS中不同类型的属性选择器，包括[attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value]和[attribute*=value]，并提供了实例解释它们如何选取和设置带有特定属性的HTML元素样式。此外，还提及了属性选择器在设置无class或id的表单样式时的实用性。

css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式

CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

a[target] {
  background-color: yellow;
}

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

a[target="_blank"] { 
  background-color: yellow;
}

CSS [attribute~="value"] 选择器

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

下例选取 title 属性包含 "flower" 单词的所有元素：

[title~="flower"] {
  border: 5px solid yellow;
}

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

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

下例选取 class 属性以 "top" 开头的所有元素：

[class|="top"] {
  background: yellow;
}

值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

CSS [attribute^="value"] 选择器

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

下例选取 class 属性以 "top" 开头的所有元素：

提示：值不必是完整单词！

[class^="top"] {
  background: yellow;
}

CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 "test" 结尾的所有元素：

提示：值不必是完整单词！

[class$="test"] {
  background: yellow;
}

CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 "te" 的所有元素：

提示：值不必是完整单词！

[class*="te"] {
  background: yellow;
}

设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}