CSS学习笔记之属性选择器

属性选择器

在CSS中，属性选择器允许您根据元素的属性及其值来选择和样式化元素。属性选择器的基本语法是使用方括号 [] 来包围属性名和可选的属性值。

基本属性选择器

选择具有指定属性的所有元素
语法为

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

示例：将所有具有target属性的元素字体设为蓝色

[target] {
	color : blue
}

具有特定值的属性选择器

选择属性值等于指定值的元素
语法为

[attribute="value"] {
  /* CSS样式 */
}

示例：选择所有target属性值为_btn的元素，将字体设为蓝色

[target="_btn"] {
	color : blue
}

属性值开始于指定值的选择器

选择属性值以指定值开头的元素
语法为

[attribute^="value"] {
  /* CSS样式 */
}

属性值结束于指定值的选择器

选择属性值以指定值结尾的元素
语法为

[attribute$="value"] {
  /* CSS样式 */
}

属性值包含指定子串的选择器

选择属性值中包含指定子串的元素
语法为

[attribute*="value"] {
  /* CSS样式 */
}

属性值包含指定词的选择器

选择属性值为一个由空格分隔的词列表，并且其中一个词等于指定值的元素
语法为

[attribute~="value"] {
  /* CSS样式 */
}

属性值以指定值开始，后跟一个连字符的选择器

选择属性值以指定值开头并后跟连字符（-）的元素，这常用于语言子标签选择
语法为

[attribute|="value"] {
  /* CSS样式 */
}