【译】用CSS属性选择器来拼接HTML的DNA

原文连接：www.smashingmagazine.com/2018/10/att…

CSS属性选择器很是神奇，它们能够帮你避免添加数不胜数的类名，从另外一方面来指出你代码里的一些问题。可是你们不用慌，虽然属性选择器复杂且强大，可是很易于学习和使用。在这篇文章，咱们将讨论它们是如何运行起来的，再教你们一些使用方面的技巧。

通常咱们最广泛的使用方法是将HTML属性放进一个方括号中，称之为属性选择器。例如：

[href] {
    color: chartreuse;
}
复制代码

任何具备href属性且没有更具体的选择器的html元素如今都会变成黄绿色。属性选择器的特性和类选择器一致

可是你可使用属性选择器作更多的事情。就像你的DNA同样，它们具备嵌入式的逻辑，可帮助您选择各类属性组合和值。 它们不只能够精确的匹配标签，类或id选择器，并且能够匹配属性中的任何属性甚至字符串值。

属性选择

属性选择器能够独立存在或更具体一点，好比咱们须要选择具备title属性的全部div标签。

div[title]
复制代码

也能够经过下面操做来选择具备title属性的div的子元素：

div [title]
复制代码

须要明确的是，中间的空格表明着是后台选择器，即选择具备该属性的元素的子元素。咱们也能够更精确一点，来选择想要的属性值：

div[title="dna"]
复制代码

大多数状况下，属性选择器不须要引号，但我会使用它们，由于我相信它能够提供可读性并确保具备良好的兼容性

若是你想从通过空格分割后的列表里选择具备"dna"字符的属性值，好比“my beautiful dna”或“mutating dna is fun!”，能够在等号前添加一个波浪号`~`：

div[title~="dna"]
复制代码

您能够选择“dontblamemeblamemydna”或“his-stupidity-is-from-upbringing-not-dna”之类的标题，而后使用美圆符号`$`来匹配title的结尾：

[title$="dna"]
复制代码

要匹配属性值的前面，例如“dnamutants”或“dna-splicing-for-all”的标题，就用插入符号`^`。

[title^="dna"]
复制代码

若是你想彻底匹配一个值开头的完整单词，可使用管道符来作。好比你不想选择一个“genealogy”的title，但仍然想选择“gene”和“gene-data”：

[title|="gene"]
复制代码

还有一个匹配任何子字符串的模糊搜索属性运算符`*`：

[title*="dna"]
复制代码

最后要知道的是，您能够添加一个标志，让属性搜索不区分大小写。 在结束方括号以前添加`i`：

[title*="DNA" i]
复制代码

使这些属性选择器更增强大的缘由是它们是可堆叠的 —— 容许您选择具备多个匹配因子的元素。

好比你须要找到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>
复制代码

.joke:hover:after {
   content: "Answer:" attr(title);
   display: block;
}
复制代码

上面的代码在鼠标悬停时将显示一串自定义的字符串。

如今咱们已经看到了如何使用属性选择器进行选择，让咱们看看一些用例。我把它们分为两类：通常使用技巧和诊断。

通常使用技巧

输入类型的设置

您能够不一样地设置输入类型，例如电子邮件与电话：

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;
}
复制代码

显示文件类型

默认状况下，文件类型输入标签的可接受文件列表是不可见的。一般，咱们使用伪元素来公开它们，虽然你不能在大多数输入标签上（或者在Firefox或Edge中）使用伪元素，可是你能够在文件输入上使用它们：

<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>
  <summary>List of Genes</summary>
    Roddenberry
    Hackman
    Wilder
    Kelly
    Luen Yang
    Simmons
</details>
复制代码

details[open] {
   background-color: hotpink;
}
复制代码

打印连接

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;
}
复制代码

诊断

这些选项用于帮助咱们在构建过程当中或在尝试修复问题时在本地识别问题。将这些内容放在咱们的生产网站上会使用户产生错误。

没有controls属性的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文件

web页面能够是内容管理系统和插件，框架和代码的集合，Ted 在度假时写道，肯定哪些JavaScript异步加载以及哪些不加载能够帮助您专一于提升页面性能：

script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}
复制代码

Javascript事件

您还能够突出显示具备JavaScript事件属性的元素，我在这里举例OnMouseOver属性，但它适用于任何JavaScript事件属性：

[OnMouseOver] {
   color: burlywood;
}
[OnMouseOver]:after {
   content: "JS: " attr(OnMouseOver);
}
复制代码