css中class选择符在定义的前面要有指示符

铝哥 2024-07-27 17:48:52 17

默认

要使用CSS选择特定属性值开头的class并为其添加样式，可以使用属性选择器（Attribute Selector），属性选择器允许我们根据元素的属性和属性值来选择匹配的元素，我们可以使用`^=`操作符来表示属性值以某个字符串开头。

下面是一个示例，演示如何使用CSS选择特定属性值开头的class并为其添加样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 选择 class 名称以 "example-" 开头的元素，并为其添加样式 */
    [class^="example-"] {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="example-1">这是一个以 "example-1" 开头的class。</div>
  <div class="example-2">这是一个以 "example-2" 开头的class。</div>
  <div class="not-example">这不是一个以 "example-" 开头的class。</div>
</body>
</html>

在上面的示例中，我们使用`[class^="example-"]`选择器来选择所有class名称以"example-"开头的元素，并为它们设置红色字体和加粗样式，只有class名称以"example-"开头的元素才会应用这些样式，其他不匹配的元素将保持默认样式。