前端开发需要知道的一些CSS属性选择器！

作者：John译者：前端小智来源：smashingmagazine点赞再看，养成习惯本文已收录到GitHubhttps://github.com/qq44924588...，还整理了一个我的很多文档和教程材料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。为了保证更好的可读性，本文采用意译而非直译。属性选择器很棒。它们可以使您免于棘手的问题，帮助您避免添加类，并指出代码中的一些问题。不过不用担心，虽然属性选择器非常复杂和强大，但它们很容易学习和使用。在本文中，我们将讨论它们的工作原理并给出一些关于如何使用它们的想法。HTML属性通常用方括号括起来，称为属性选择器，如下所示：[href]{color:red;}这样任何具有href属性且没有更具体的选择器的元素的文本颜色都将是红色。属性选择器具有与类相同的属性。注意：有关cagematching的CSS特性的更多信息，您可以阅读CSSFeatures:ThingsYouShouldKnow，或者如果您喜欢StarWars:CSSFeaturesatWar。但是您可以使用属性选择器做更多的事情。就像您的DNA一样，它们具有内置逻辑来帮助您选择各种属性组合和值。它们可以匹配属性中的任何属性，甚至是字符串值，而不是像标签、类或ID选择器那样完全匹配。属性选择器属性选择器可以独立存在。更具体的，如果你需要选择所有带有title属性的div标签，你可以这样做：div[title]但是你也可以通过下面的操作选择带有title属性的div的子元素div[title]它需要需要说明的是，它们之间没有空格意味着该属性在同一个元素上（就像元素和类之间没有空格一样），它们之间有空格意味着后代选择器，即选择具有该属性的元素的子元素。您可以微调具有特定属性值的属性选择。上面的div[title="dna"]选择所有具有确切名称dna的div，虽然有选择器算法来处理每种情况（以及更多），但它不会在此处选择“dnaisawesome”或“dnamutation”标题。注意：在大多数情况下，属性选择器中不需要引号，但我使用它们是因为我相信它可以提高干净代码的可读性并确保边缘情况正常工作。如果要选择标题包含dna的元素，例如“mybeautifuldna”或“mutatingdnaisfun!”，请使用波浪号(~)。div[title~="dna"]如果你想匹配以dna结尾的标题，比如　"dontblamemeblamemydna"或"his-stupidity-is-from-upbringing-not-dna"，只需使用$符号:[title$="dna"]如果你想匹配以dna开头的标题，比如　"dnamutants"或"dna-splicing-for-all"，你可以只使用^符号：[title^="dna"]虽然完全匹配很有用，但它可能选择得太紧，而插入符匹配可能太宽泛而无法满足您的需要。例如，您可能不想选择标题“genealogy”，但仍选择“gene”和“gene-data”。竖线（|）的特点就是，属性必须是一个完整且唯一的词，或者用-隔开。[title|="gene"]最后，还有一个匹配任意子串的模糊搜索属性运算符。字符串拆分是在属性中完成的，只要能拆分出dna这个词即可：[title*="dna"]这些属性选择器更强大的地方在于它们是可堆叠的，可以让你选择具有多个匹配因子的元素.如果你需要找到一个有标题和以“genes”结尾的类的a标签，你可以使用下面的方法：a[title][class$="genes"]你不仅可以选择HTML元素的属性,你也可以使用伪类型元素打印出文本：生物技术记者在完成一篇文章的初稿后做的第一件事是什么？.joke:hover:after{content:"Answer:"attr(title);display:block;}上面的代码将在鼠标悬停在上面时显示一个自定义字符串。最后要知道的是，您可以添加一个标志以使属性搜索不区分大小写。在右方括号前添加i：[title*="DNA"i]以便匹配dna、DNA、dnA等。现在我们已经了解了如何使用属性选择器进行选择，让我们看一些用例。我将它们分为两类：一般用途和诊断。通用输入类型样式设置您可以对电子邮件和电话等输入类型使用不同的样式。input[type="email"]{color:papayawhip;}input[type="tel"]{color:thistle;}显示电话链接您可以隐藏特定尺寸的电话号码并显示电话链接，以便在手机上轻松拨打电话。span.phone{display:none;}a[href^="tel"]{display:block;}内部链接vs外部链接，安全链接vs非安全链接你可以区别对待内部链接和外部链接，并设置安全链接为了区别于不安全的链接：a[href^="http"]{color:bisque;}a:not([href^="http"]){color:darksalmon;}a[href^="http://"]:after{content:url(unlock-icon.svg);}a[href^="https://"]:after{content:url(lock-icon.svg);}下载图标HTML5给我们其中一个属性是“下载”，您猜对了，它告诉浏览器下载文件而不是尝试打开它。这非常适合您希望人们访问但不希望它们立即打开的PDF和DOC。它还使连续下载大量文件的工作流程更加容易。下载属性的缺点是没有默认视觉来将其与更传统的链接区分开来。通常这是你想要的，但如果不是，你可以这样做：a[download]:after{content:url(download-arrow.svg);}与ODF等）来表示文档类型等。a[href$="pdf"]:after{content:url(pdf-icon.svg);}a[href$="docx"]:after{content:url(docx-icon.svg);}a[href$="odf"]:after{content:url(open-office-icon.svg);}您还可以通过叠加属性选择器确保这些图标仅出现在可下载链接上。a[download][href$="pdf"]:after{content:url(pdf-icon.svg);}覆盖或重新使用已弃用/已弃用的代码我们都遇到过带有过时代码的旧站点在HTML5之前，您可能需要覆盖甚至重新应用作为属性实现的样式。古老的多孔基因