css选择器如何匹配带特定属性的元素-css教程-PHP中文网

css选择器如何匹配带特定属性的元素

P粉602998670

发布： 2025-10-30 18:51:16

原创

963人浏览过

属性选择器通过方括号匹配元素，可依据属性存在或属性值精确/模糊匹配；2. a[title]选所有含title属性的链接；3. input[type="email"]仅选type为email的输入框；4. [class~="highlight"]选class包含highlight单词的元素；5. a[href*="example.com"]选href含该字符串的链接；6. ^=、$=、|=分别匹配值开头、结尾和连字符分隔的语言属性，如a[href$=".pdf"]选PDF链接，[lang|="zh"]选中文语言文本。

css选择器如何匹配带特定属性的元素

在CSS中，可以通过属性选择器来匹配带有特定属性的元素。属性选择器使用方括号 [] 包裹属性名称或表达式，可以根据是否存在某个属性，或属性值的具体内容来进行匹配。

1. 匹配具有某属性的元素

只要元素拥有指定的属性，无论其值是什么，都会被选中。

/* 选择所有包含 title 属性的 a 元素 */
a[title] {
  color: purple;
}

登录后复制

上面的规则会匹配所有带有 title 属性的 <a> 标签，例如：

<a href="#" title="提示信息">有标题的链接</a>

登录后复制

2. 匹配属性值完全相等的元素

使用等号 = 来精确匹配属性值。

立即学习“前端免费学习笔记（深入）”；

/* 选择 type 属性值为 "email" 的 input 元素 */
input[type="email"] {
  border: 2px solid #007cba;
}

登录后复制

这条规则只会作用于 type="email" 的输入框，不会影响 type="text" 或其他类型。

琅琅配音

全能AI配音神器

208

查看详情

3. 匹配属性值包含某个词（以空格分隔）

使用波浪号加等号 ~=\ 可以匹配属性值中包含指定单词的元素（适用于以空格分隔的多个类名等情况）。

/* 选择 class 属性中包含 "highlight" 的元素 */
[class~="highlight"] {
  background-color: yellow;
}

登录后复制

例如下面这个元素会被选中：

<p class="example highlight">这段文字会高亮</p>

登录后复制

4. 匹配属性值包含子串

使用星号加等号 *=\ 可以匹配属性值中包含指定字符串的元素，即使只是部分内容。

/* 选择 href 中包含 "example.com" 的 a 元素 */
a[href*="example.com"] {
  font-weight: bold;
}

登录后复制

5. 其他常用属性选择器

^=\：匹配属性值以指定字符串开头的元素
$=\：匹配属性值以指定字符串结尾的元素
|=\：匹配属性值等于指定值，或以该值加连字符开头的元素（常用于语言属性）

例如：

/* 以 .pdf 结尾的链接 */
a[href$=".pdf"] {
  color: red;
}
<p>/<em> lang="zh" 或 lang="zh-CN" </em>/
[lang|="zh"] {
font-family: "PingFang SC", sans-serif;
}</p>

登录后复制

基本上就这些常见的用法。根据实际需要组合使用，可以精准定位目标元素，无需额外添加 class 或 id。

以上就是css选择器如何匹配带特定属性的元素的详细内容，更多请关注php中文网其它相关文章！