CSS属性选择器的强大之处

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

所有 HTML 元素都可以拥有属性，这些属性可以添加：

• 功能性——以标签为例<img src="picture.jpeg">。该src属性赋予标签功能，如果没有它，图像将不会显示在网页上。
• 修改 -通过向使用屏幕阅读器的用户或在图像无法显示的情况下提供附加信息来修改alt标签。<img src="picture.jpeg" alt="this is a picture">img

虽然其中一些属性对元素有直接作用，但有些属性（例如：）id and class在被 CSS 定位之前几乎无法使用。

添加和定位id and class是开发者选择元素最常用的方法之一，但CSS提供了非常强大的网页元素选择功能，无需直接在HTML元素中添加id或class通过JavaScript进行选择。您只需找到目标元素中其他可以使用CSS定位的属性即可。

话不多说，让我们深入了解一下一些现成的 CSS 选择器，它们正等着你去使用：

• [属性] 这允许您定位页面上方括号中指定的属性。

[href] {
 color:#0f0;
}

上面的代码会查找href文档中的所有属性，并将它们的颜色更改为绿色。
其他应用场景包括[id], [class], [target]：

• element[attribute] 这允许您定位到元素标签之前的指定属性。

img[alt] {
  display:none;
 }

上面的代码允许您定位所有img带有 ` alt<image>` 属性的标签，这可用于检查图像是否具有无障碍功能，因为所有图像标签都应该始终具有 `<image>`alt属性。
因此，` <img src="myImage.png" alt=""><image>` 将不会显示，而 `<image>`<img src="ourImage.png">则会显示在网页上。
其他情况包括：`<image>` input[type]、` input[placeholder<image>` 等。

• element[attribute=value] 此选择器允许您仅选择值与方括号中的值完全相同的属性。

p[id=about] {
 color:#f00;
}

上面的代码允许你精确定位<p></p>id 为 about 的标签。
你可能会问，为什么不直接"#about"在 CSS 中使用 `<div>` 选择器来定位它呢？使用属性选择器可以降低id选择器的优先级。

• element[attribute|=value] 这允许您定位具有特定值或以特定值开头并以连字符结尾的属性。

button[class|="btn"] {
 color: #00f;
}

上面的代码会查找所有类名以“btn”或“btn-something”<button></button>开头的标签。因此，它会匹配到“btn”和“btn-something” 。这对于使用 BEM 命名规范的用户来说非常有用。<button class="btn"></button><button class="btn-primary"></button>

• element[attribute~="value"] : 这允许您定位以空格分隔的属性列表中的完整单词的值。

[title~="name"] {
 color: #ff00ff;
}

上面的代码会查找所有 title 属性中包含值为“name”的单词。
因此，这将匹配成功<abbr title="my name abbreviation">MOE</abbr>。

• element[attribute^="value"] : 此属性选择器允许您定位任何值以属性值中包含的值开头的属性。

a[href^="https://"] {
    color: #cd853f;
}

上面的代码会查找所有<a>指向外部链接的标签。因此，`( <a href="https://www.google.com">Google</a>)` 会匹配，而 `( <a href="#about">Google</a>)` 则不会。

• element[attribute$="value"] : 这允许您定位任何值以属性值中包含的值结尾的属性。

img[src$=jpg] {
    display: block;
    height: auto;
    margin: 0 auto;
}

上面的代码会匹配所有内容以jpg结尾img的标签。 因此，这段代码（）会匹配，而这段代码（）则不会。src
<img src="inage.jpg" alt=""><img src="inage.jpeg" alt="">

• element[attribute*="value"]：这允许您定位 HTML 文档中任意位置的属性值。它不必是完整的单词或独立的词，只要存在即可。

[class*="primary"]{
    color: cadetblue;
    background-color: black;
    border: none;
    padding: .4rem;
    width: 10vh;
    cursor: pointer;
}

上面的代码将匹配：
<button class="btn-primary" type="submit">submit</button>，它也将匹配<p class="primaryheader">another match</p>。

CSS 属性选择器功能强大，只要你了解并正确运用它们。但最重要的是，它们能帮助你实现元素的低优先级，从而简化你的开发工作。

这是我的第一篇技术文章，希望对您有所帮助。欢迎提出任何改进建议。
当您需要使用属性选择器时，可以随时参考下面的表格。