属性选择器

属性选择器是CSS的一种选择器，通过元素的属性值进行选择，从而改变该元素的样式。

基本属性选择器

基本属性选择器使用元素的属性名和属性值来选择元素，语法格式如下：

[attribute=value] {
  /* styles */
}

其中，attribute是属性名，value是属性值，中括号表示属性选择器。

下面是一个使用基本属性选择器的例子：

input[type="text"] {
  border: 1px solid grey;
}

这个样式定义选择所有type属性值为text的input元素，并设置其边框样式为灰色。

同样适用于其他的HTML元素，例如：

a[href="https://example.com"] {
  color: red;
}

这个样式定义选择所有href属性值为https://example.com的a元素，并设置其字体颜色为红色。

值得注意的是，属性选择器的属性值一般加上引号，特别是属性值里面包含空格时更需要加上引号。

子串匹配属性选择器

子串匹配属性选择器用来选择元素属性值中包含特定子串的元素。语法格式如下：

[attribute*=value] {
  /* styles */
}

其中，*=表示包含。

下面是一个例子：

a[href*="example"] {
  font-weight: bold;
}

这个样式定义选择所有href属性值中包含example子串的a元素，并设置其字体加粗。

和基本属性选择器一样适用于其他的HTML元素。

属性值前缀匹配选择器

属性值前缀匹配选择器用来选择元素属性值中以特定字符串开头的元素。语法格式如下：

[attribute^=value] {
  /* styles */
}

其中，^=表示以。

下面是一个例子：

img[src^="https://"] {
  border: 1px solid black;
}

这个样式定义选择所有src属性值以https://开头的img元素，并设置其边框样式为黑色。

和基本属性选择器一样适用于其他的HTML元素。

属性值后缀匹配选择器

属性值后缀匹配选择器用来选择元素属性值中以特定字符串结尾的元素。语法格式如下：

[attribute$=value] {
  /* styles */
}

其中，$=表示以。

下面是一个例子：

a[href$=".pdf"] {
  color: red;
}

这个样式定义选择所有href属性值以.pdf结尾的a元素，并设置其字体颜色为红色。

和基本属性选择器一样适用于其他的HTML元素。

属性值精确匹配选择器

属性值精确匹配选择器用来选择元素属性值精确等于特定字符串的元素。语法格式如下：

[attribute=value] {
  /* styles */
}

其中，=表示等于。

下面是一个例子：

input[type="submit"] {
  background-color: blue;
}

这个样式定义选择所有type属性值等于submit的input元素，并设置其背景颜色为蓝色。

同样适用于其他的HTML元素。

总结

以上介绍了CSS属性选择器的各种形式和用法，能使程序员根据元素的属性值来定位到相应的元素并进行样式调整。