CSS如何选带特定属性的元素

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

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

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

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

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如何选带特定属性的元素》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！