CSS | 属性选择器

CSS属性选择器是一种选择器，它基于HTML标记的属性和属性值来选择元素。使用属性选择器可以根据元素的属性和属性值来选择元素，使你的CSS代码更加灵活且易于维护。

语法

CSS属性选择器使用方括号[]来表示，语法为：

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

其中，selector表示要选择的元素，attribute表示要匹配的属性名称，value表示要匹配的属性值。

常见属性选择器

[attribute]

选择具有指定属性的元素，示例代码如下：

a[href] {
  /* styles */
}

上述代码将选择所有具有href属性的<a>元素。

[attribute=value]

选择具有指定属性值的元素，示例代码如下：

input[type="text"] {
  /* styles */
}

上述代码将选择所有type属性为"text"的<input>元素。

[attribute^=value]

选择具有以指定值开始的属性值的元素，示例代码如下：

a[href^="https"] {
  /* styles */
}

上述代码将选择所有href属性值以"https"开头的<a>元素。

[attribute$=value]

选择具有以指定值结尾的属性值的元素，示例代码如下：

img[src$=".png"] {
  /* styles */
}

上述代码将选择所有src属性值以".png"结尾的<img>元素。

[attribute*=value]

选择具有包含指定值的属性值的元素，示例代码如下：

input[type*="password"] {
  /* styles */
}

上述代码将选择所有type属性包含"password"的<input>元素。

总结

CSS属性选择器提供了一种基于HTML标记的属性和属性值来选择元素的方法，使你的CSS代码更加灵活且易于维护。我们可以使用常见的属性选择器来实现很多有用的效果，如去除网页中所有的外链样式等。