[href] {color: red;}
这样任何具有 href 属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。
但是你可以使用属性选择器做得更多。就像你的 DNA 一样，它们有内在的逻辑来帮助你选择各种属性组合和值。它们可以匹配属性中的任何属性，甚至字符串值，而不是像标签、类或id选择器那样精确匹配。
div[title]但你也可以通过以下操作选择具有 `title` 属性的 **div** 的子元素
div需要说明的是，它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样)，而它们之间的空格意味着后代选择器，即选择具有该属性的元素的子元素。
你可以更精细地选择具体属性值的属性。
div[title="dna"]上面选择了所有具有确切名称 dna 的div,虽然有选择器算法可以处理每种情况（以及更多），但这里不会选择 “dna is awesome” 或 “dnamutation” 的标题。
div[title~="dna"]如果你想匹配以 dna 结尾的 title,如 “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ，可以使用 $ 标志符：
[title$="dna"]如果你想匹配以 dna 开头的 titlle 如“dnamutants” 或 “dna-splicing-for-all” ，可以使用`^`标志符：
[title^="dna"]虽然精确匹配是有帮助的，但它可能选择太紧，并且 ^ 符号匹配可能太宽而无法满足你的需要。例如，可能不想选择 “genealogy” 的标题，但仍然选择“gene”和“gene-data”。**管道特征(|)**就是这样，属性中必须是完整且**唯一**的单词，或者以 – 分隔开。
[title|="gene"]最后，还有一个匹配任何子字符串的模糊搜索属性操作符，属性中做字符串拆分，只要能拆出来 dna 这个词就行:
[title*="dna"]使这些属性选择器更加强大的是，它们是可堆叠的，允许你选择具有多个匹配因子的元素。
如果你需要找到一个 a 标签，它有一个 title ，并且有一个以“genes” 结尾的 class,可以使用如下方式：
a[title][class$="genes"]你不仅可以选择 HTML 元素的属性，还可以使用伪类型元素来打印出文本：
<span class="joke" title="Gene Editing!">What’s the first thing a biotech journalist does after finishing the first draft of an article?</span><br>.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);}
还可以使用不同的图标（如PDF与DOCX与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 之前，你可能需要覆盖甚至重新应用作为属性实现的样式。
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div>div[bgcolor="#000000"] { /*override*/background-color: #222222 !important;}div[color="#FFFFFF"] { /*reapply*/color: #FFFFFF;}
重写特定的内联样式
有时候你会遇到一些内联样式，这些样式会影响布局，但这些内联样式我们又没修改。那么以下是一种方法。
<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div>div[style*="margin: 8px"] {margin: 1em !important;}
显示文件类型
默认情况下，文件输入的可接受文件列表是不可见的。通常，我们使用伪元素来暴露它们：
<input type="file" accept="pdf,doc,docx">[accept]:after {content: "Acceptable file types: " attr(accept);}
html 手风琴菜单
details 和 summary 标签是一种只用**HTML**做扩展/手风琴菜单的方法，details 包括了summary标签和手风琴打开时要展示的内容。点击 summary 会展开 details 标签并添加 open 属性，我们可以通过 open 属性轻松地为打开的 details 标签设置样式：
details[open] {background-color: hotpink;}
打印链接
在打印样式中显示URL使我走上了理解属性选择器的道路。你现在应该知道如何自己构建它， 你只需选择带有`href`的所有标签，添加伪元素，然后使用 attr() 和content 打印它们。
a[href]:after {content: " (" attr(href) ") ";}
自定义提示
使用属性选择器创建自定义工具提示既有趣又简单：
[title] {position: relative;display: block;}[title]:hover:after {content: attr(title);color: hotpink;background-color: slateblue;display: block;padding: .225em .35em;position: absolute;right: -5px;bottom: -5px;}
便捷键
web 一大优点是它提供了许多不同的信息访问选项。一个很少使用的属性是设置 accesskey 的能力，这样就可以通过键组合和 accesskey 设置的字母直接访问该项目(确切的键组合取决于浏览器)。但是要想知道网站上设置了哪些键并不是件容易的事
下面的代码将显示这些键 :focus。我不使用鼠标悬停，因为大多数时候需要 accesskey 的人是那些使用鼠标有困难的人。你可以将其添加为第二个选项，但要确保它不是惟一的选项。
a[accesskey]:focus:after {content: " AccessKey: " attr(accesskey);}
没有 controls 属性的 audio
我不经常使用`audio`标签，但是当我使用它时，我经常忘记包含 controls 属性。结果：没有显示任何内容。如果你在 Firefox，如果隐藏了音频元素，或者语法或其他一些问题阻止它出现（仅适用于Firefox），此代码可以帮助你解决问题：
audio:not([controls]) {width: 100px;height: 20px;background-color: chartreuse;display: block;}
没有 alt 文本
没有 alt 文本的图像是可访问性的噩梦。只需查看页面就很难找到它们，但如果添加它们，它们就会弹出来（当页面图片加载失败时，alt文字可以更好的解释图片的作用）：
img:not([alt]) { /* no alt attribute */outline: 2em solid chartreuse;}img[alt=""] { /* alt attribute is blank */outline: 2em solid cadetblue;}
异步 Javascript 文件
网页可以是内容管理系统和插件，框架和代码的集合，确定哪些JavaScript异步加载以及哪些不加载可以帮助你专注于提高页面性能。
script[src]:not([async]) {display: block;width: 100%;height: 1em;background-color: red;}script:after {content: attr(src);}
JavaScript 事件元素
你可以突出显示具有 JavaScript 事件属性的元素，以便将它们重构到JavaScript文件中。这里我主要关注OnMouseOver 属性，但是它适用于任何JavaScript事件属性。
[OnMouseOver] {color: burlywood;}[OnMouseOver]:after {content: "JS: " attr(OnMouseOver);}
隐藏项
如果需要查看隐藏元素或隐藏输入的位置，可以使用它们来显示
[hidden], [type="hidden"] {display: block;}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259387.html