将 HTML 的 DNA 与 CSS 属性选择器拼接

Desknumber

属性选择器很神奇。它们可以帮助您摆脱棘手的问题，帮助您避免添加类并指出代码中的一些问题。但不用担心，虽然属性选择器复杂而强大，但它们很容易学习和使用。在本文中，我们将讨论它们的运作方式，并为您提供一些有关如何使用它们的想法。
在我职业生涯的大部分时间里，属性选择器比科学更神奇。我目瞪口呆地看着用于在打印样式表中输出链接的 CSS，却一无所知。我会尽职尽责地将其复制并粘贴到我的打印样式表中，然后跑去消灭最大的燃烧垃圾堆的项目。

但您不必再呆呆地盯着 CSS 属性选择器了。在本文 电子邮件营销列表 结束时，您将使用它们在您的站点上运行诊断，解决其他无法解决的问题，并生成先进的技术体验，就像魔法一样。您可能认为我承诺太多，您是对的，但是一旦您了解了属性选择器的强大功能，您可能会觉得夸大自己。

在最基本的层面上，您可以将 HTML 属性放在方括号中，并将其称为属性选择器，如下所示：
每月 Web 开发更新10 ⁄ 2018：飓风 Web、端到端完整性和 RAIL



复制任何具有href和不具有更具体选择器的元素的文本现在都会神奇地变成黄绿色。属性选择器的特异性与类相同。

注意：有关 CSS 特异性的笼子匹配的更多信息，您可以阅读“ CSS 特异性：您应该知道的事情”，或者如果您喜欢星球大战：“ CSS 特异性战争”。

但是您可以使用属性选择器做更多的事情。就像您的 DNA 一样，它们具有内置逻辑来帮助您选择各种属性组合和值。它们不仅可以像标签、类或 id 选择器那样精确匹配，还可以匹配任何属性，甚至属性中的字符串值。