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

属性选择器通过方括号匹配元素，可依据属性存在或属性值精确/模糊匹配；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中，可以通过属性选择器来匹配带有特定属性的元素。属性选择器使用方括号 [] 包裹属性名称或表达式，可以根据是否存在某个属性，或属性值的具体内容来进行匹配。

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配音神器

89

查看详情

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。

以上就是