CSS 使用“:” (冒号) 按属性选择元素

在本文中，我们将介绍如何使用 CSS 的 “:（冒号）” 来按属性选择元素。CSS 通过选择器来定位和样式化 HTML 元素，而使用属性选择器可以更精确地选择特定的元素。

阅读更多：CSS 教程

什么是属性选择器？

属性选择器是一种通过指定 HTML 元素的属性来选择特定元素的 CSS 选择器。它们以 “：” (冒号) 开头，后跟属性和属性值的组合。

CSS 提供了多种属性选择器，包括：

• [attribute]：选择具有指定属性的元素。
• [attribute=value]：选择具有指定属性且属性值与指定值完全相等的元素。
• [attribute~=value]：选择具有指定属性且属性值包含指定值的元素。
• [attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。
• [attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。
• [attribute*=value]：选择具有指定属性且属性值包含指定值的元素。

举个例子

假设我们有以下 HTML 结构：

<ul>
  <li class="active">Home</li>
  <li class="inactive">About</li>
  <li class="active">Services</li>
  <li class="inactive">Contact</li>
</ul>

选择具有指定属性的元素

如果我们想选择具有 “active” 类的所有 <li> 元素，可以使用以下属性选择器：

li[class] {
  background-color: yellow;
}

上述代码将选择具有任何类的 <li> 元素并将其背景颜色设置为黄色。

选择具有指定属性值的元素

如果我们只想选择具有特定类的 <li> 元素，可以使用以下属性选择器：

li[class="active"] {
  color: red;
}

上述代码将选择具有类名为 “active” 的 <li> 元素并将其文字颜色设置为红色。

选择具有包含指定值的元素

如果我们希望选择具有类名中包含特定关键字的 <li> 元素，可以使用以下属性选择器：

li[class~="active"] {
  font-weight: bold;
}

上述代码将选择具有类名中包含 “active” 关键字的 <li> 元素，并将它们的字体加粗。

选择具有以指定值开头的元素

如果我们想选择具有以特定值开头的类名的 <li> 元素，可以使用以下属性选择器：

li[class^="in"] {
  text-decoration: underline;
}

上述代码将选择具有以 “in” 开头的类名的 <li> 元素，并给它们添加下划线文本装饰。

选择具有以指定值结尾的元素

如果我们希望选择具有以特定值结尾的类名的 <li> 元素，可以使用以下属性选择器：

li[class$="ive"] {
  text-transform: uppercase;
}

上述代码将选择具有以 “ive” 结尾的类名的 <li> 元素，并将它们的文本转换为大写。

选择具有包含指定值的元素

如果我们希望选择具有类名中包含特定关键字的 <li> 元素，可以使用以下属性选择器：

li[class*="ct"] {
  background-color: cyan;
}

上述代码将选择具有类名中包含 “ct” 关键字的 <li> 元素，并将它们的背景颜色设置为青色。

总结

CSS 的 “:（冒号）” 属性选择器是选择和样式特定元素的有用工具。通过了解不同类型的属性选择器和示例用法，我们可以更好地掌握 CSS。希望本文对你理解和应用 CSS 属性选择器有所帮助！