如何用css选择器选中带特定属性的元素

使用[title]选中含title属性的元素；2. input[type="text"]精确匹配type为text的输入框；3. [class~="highlight"]匹配含独立类名highlight的元素；4. a[href*="example"]匹配href含"example"子串的链接；5. ^=、$=、|=分别匹配属性值开头、结尾及连字符分隔的情况，灵活精准定位无需修改HTML。

要选中带有特定属性的元素，可以直接使用CSS属性选择器。这种选择器通过方括号 [] 来匹配具有指定属性的元素，无论属性值是什么，或者匹配属性值为特定内容的元素。

1. 选择带有某个属性的元素

例如，选中所有带有 title 属性的元素：

[title] {
  color: blue;
}

上面的样式会作用于所有包含 title 属性的标签，比如 <p title="提示"> 或 <a title="链接" href="#">。

2. 选择属性值等于特定字符串的元素

例如，选中 type 属性值为 text 的输入框：

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

input[type="text"] {
  border: 1px solid #ccc;
}

这只会选中 <input type="text">，不会影响 type="password" 或其他类型。

英特尔AI工具

英特尔AI与机器学习解决方案

70

查看详情

3. 匹配属性值包含特定单词（以空格分隔）

常用于 class 属性，因为类名是以空格分隔的。

[class~="highlight"] {
  background: yellow;
}

这会选中 class="demo highlight" 或 class="highlight important" 等含有独立单词 highlight 的元素。

4. 匹配属性值包含子串

例如，选中所有 href 中包含 "example" 的链接：

a[href*="example"] {
  color: green;
}

这个规则会命中 http://www.example.com、https://sub.example.org 等。

5. 其他常用属性匹配方式

• ^=：匹配属性值以指定字符串开头的元素。
  例：a[href^="https"] 选中所有 HTTPS 链接。
• $=：匹配属性值以指定字符串结尾的元素。
  例：img[src$=".png"] 选中所有 PNG 图片。
• |=：匹配属性值等于指定值或以该值加连字符开头的元素。
  例：[lang|="en"] 可匹配 lang="en" 或 lang="en-US"。

基本上就这些常见用法。属性选择器灵活且强大，特别适合在不修改HTML结构的情况下精准定位元素。关键是根据实际属性和值的特点选择合适的匹配符号。不复杂但容易忽略细节，比如引号和符号的准确性。写的时候注意别漏了等号或写错符号。基本上就这些。

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