带属性的 CSS 选择

CSS 是层叠样式表的缩写，用于控制 HTML 页面的样式和排版。CSS 引入了许多选择器来指定 HTML 元素的样式。本文将介绍带属性的 CSS 选择器。

基本语法

带属性的 CSS 选择器由以下组成：

selector[attribute]

其中，selector 为选择器，可以是元素选择器、类选择器、ID 选择器等。attribute 表示要匹配的属性，可以是任何有效的 HTML 属性名。选择器和属性名之间用方括号 [] 包围。

下面是一个例子，选择所有带有 src 属性的 img 元素：

img[src] {
  border: 1px solid red;
}

上面代码中，我们使用了属性选择器 [src] 来选择所有带有 src 属性的 img 元素，并给它们添加了一个红色边框。

匹配属性值

有时候我们需要选择具有特定属性值的元素，这可以使用属性选择器的另一种语法：

selector[attribute=value]

其中，value 为属性值，可以是字符串或数字等数据类型。如果属性值是字符串，需要使用引号或单引号将其括起来。

下面是一个例子，选择所有 href 属性值以 https:// 开头的 a 元素：

a[href^="https://"] {
  color: blue;
}

上面代码中，我们使用属性选择器 [href^="https://"] 来选择所有 href 属性值以 https:// 开头的 a 元素，并将它们的文字颜色改为蓝色。

类似地，我们也可以选择所有 href 属性值包含 example.com 的 a 元素：

a[href*="example.com"] {
  text-decoration: underline;
}

上面代码中，我们使用属性选择器 [href*="example.com"] 来选择所有 href 属性值包含 example.com 的 a 元素，并给它们添加下划线。

此外，还有一种以 value 结尾的匹配模式：

selector[attribute$=value]

下面是一个例子，选择所有 href 属性值以 .pdf 结尾的 a 元素：

a[href$=".pdf"] {
  background-color: yellow;
}

上面代码中，我们使用属性选择器 [href$=".pdf"] 来选择所有 href 属性值以 .pdf 结尾的 a 元素，并给它们添加黄色背景色。

结束语

带属性的 CSS 选择器是 CSS 的一种重要功能，能够更精确地控制页面元素的样式。本文介绍了带属性的 CSS 选择器的基本使用方法，包括匹配属性名和属性值。在实际使用中，可以根据自己的需求选择不同的选择器，来达到更好的效果。