CSS 属性选择器

CSS中的属性选择器可以实现对特定属性值的元素定义样式，控制显示效果。

[attribute] 选择器方式

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

示例

img[alt]{border:3px solid #060;}

该样式定义了所有具备alt属性的img图标边框样式。

试一试

[attribute=value] 选择器

该选择器是指定属性名称和属性值的选择器。

示例

input[type=text]{background-color:yellow;}

试一试

[attribute~="value"] 选择器

[attribute~="value"] 选择器和[attribute=value]类似，但具体含义不同[attribute~="value"] 其中的~=表示该属性值的内容只要包含制定的内容就可以。

示例

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

该示例定义了所有a元素中title内容只要包含linux字，其边框样式就被应用。

注意：上面的例子会匹配以下属性的元素：title="linux"、title="linux 教程" 以及 title="linux 发行"，但不匹配：title="嗨linux265" 或 title="linux265"。

试一试

[attribute|="value"] 选择器

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

例如，下例选取 title 属性以 "linux" 开头的所有元素：

注意：值必须是完整或单独的单词，比如 title="linux" 或者后跟连字符的，比如 title="linux-text"。

示例

a[title|="linux"] {
  background: yellow;
}

试一试

[attribute^="value"] 选择器

[attribute^="value"] 选择器表示选取指定属性以指定值开头的元素，而这里的value不必是完整单词。

下例选取所有<a>元素 title 属性以 "linux" 开头的所有元素：

示例

a[class^="linux"] {
  border:1px solid yellow;
}

试一试

[attribute$="value"] 选择器

[attribute$="value"] 选择器表示选取指定属性以指定值结尾的元素，其中值不必是完整单词。

下例选取 title 属性以 "linux" 结尾的所有a元素：

示例

a[title$="linux"] {
  background: yellow;
}

试一试

[attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素，需要注意的是value值不必是完整单词。

例如选取 title 属性包含 "linux" 的所有元素：

示例

a[title*="linux"] {
  background: yellow;
}

试一试

设置表单样式

设置表单样式时，我们常常会对元素添加 class 或 id 属性，便于更精确设置表单元素样式。但如果对于没有设置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;
}

试一试