css属性选择器^= $= *=实现精确匹配-css教程-PHP中文网

css属性选择器^= $= *=实现精确匹配

P粉602998670

发布： 2025-09-25 10:24:01

原创

679人浏览过

使用=实现精确匹配，如[title="example"]；^=、$=、*=分别匹配开头、结尾和包含的子串，用于模式匹配，需根据需求选择以避免误选。

css属性选择器^= $= *=实现精确匹配

在CSS中，属性选择器允许我们根据元素的属性及属性值来选择元素。常见的子串匹配属性选择器有 ^=、$= 和 *=，它们分别用于前缀、后缀和包含匹配。但这些并不是精确匹配，如果你想实现精确匹配，需要使用标准的属性选择器语法。

要实现属性值的完全相等匹配，直接使用等号 = 即可：

/* 选择 title 属性值 exactly 等于 "example" 的元素 */
[title="example"] {
  color: red;
}

登录后复制

这个选择器只会匹配 title 属性精确等于 "example" 的元素，不会匹配 "example1" 或 "my-example" 等。

^= 选择器用于选择属性值以指定字符串开头的元素：

/* 匹配 href 以 "https://" 开头的链接 */
[href^="https://"] {
  color: green;
}

登录后复制

例如，https://example.com 会被匹配，但 http://example.com 不会。

$= 选择属性值以指定字符串结尾的元素：

琅琅配音

全能AI配音神器

208

/* 匹配 src 以 ".png" 结尾的图片 */
[src$=".png"] {
  border: 1px solid blue;
}

登录后复制

这会选中所有 PNG 图片，如 logo.png，但不会选中 icon.jpg。

*= 选择属性值中包含某个子串的元素：

/* 匹配 class 属性中包含 "btn" 的元素 */
[class*="btn"] {
  padding: 10px;
}

登录后复制

像 class="button"、class="my-btn-close" 都会被匹配。

如果你希望避免 ^=、$=、*= 带来的模糊匹配，一定要用 = 实现精确控制：

/* 只匹配 data-type 精确等于 "user" 的元素 */
[data-type="user"] {
  background: #eee;
}

登录后复制

这样就不会误中 data-type="admin" 或 data-type="superuser"。

基本上就这些。记住：= 是精确匹配，其他是模式匹配。根据需求选择合适的方式即可。不复杂但容易忽略细节。

以上就是css 属性选择器^= $= *=实现精确匹配的详细内容，更多请关注php中文网其它相关文章！

大家都在看：