CSS高级选择器

CSS [attribute] 选择器

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

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

有带有 target 属性的 <a> 元素；

---

[attribute="value"]

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

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

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

p标签包裹块元素 的时候会出现包不住的情况

---

[attribute~="value"] 选择器

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

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

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

---

[attribute^="value"] 选择器

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

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

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

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

---

[attribute*="value"] 选择器

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

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

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

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