正则复杂选择器

# 如果你想使用 CSS 选择器来选择类名以特定字符开头的元素，可以使用属性选择器。

# 使用 CSS 属性选择器

假设我们想选择所有类名以 prefix- 开头的元素，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 类名选择器示例</title>
    <style>
        /* 选择类名以 prefix- 开头的元素 */
        [class^="prefix-"] {
            color: blue; /* 设置文本颜色为蓝色 */
            font-weight: bold; /* 设置粗体 */
        }
    </style>
</head>
<body>
    <h1 class="prefix-title">这是标题</h1>
    <p class="prefix-text">这是一些文本。</p>
    <p class="text">这是不匹配的文本。</p>
    <p class="prefix-note">这是一个注释。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 说明

选择器 [class^="prefix-"]:
- 这个选择器会匹配所有类名以 prefix- 开头的元素。
- 在这个示例中，.prefix-title、.prefix-text 和 .prefix-note 都会被选择并应用 CSS 样式，而 .text 则不会被选择。

# 其他相关选择器

以某个字符结尾的选择器: 使用 $= 运算符。

[class$="-end"] {
    /* 选择类名以 -end 结尾的元素 */
}

1
2
3

包含某个字符的选择器: 使用 *= 运算符。

[class*="middle"] {
    /* 选择类名中包含 middle 的元素 */
}

1
2
3

# 总结

通过使用属性选择器，CSS 可以轻松选择以特定字符开头的类名元素。这种方法对于动态生成的类名或需要按特定规则进行样式化的情况特别有用。如果你有其他

在线编辑

上次更新: 2025/02/25, 18:30:54

← css过渡 css变形→