应用CSS特性挑选器来拼接HTML的DNA的方式

CSS特性挑选器十分奇异，它们能够帮你防止加上不计其数的类名，从另外一层面来指出你编码里的1些难题。可是大伙儿无需慌，尽管特性挑选器繁杂且强劲，可是很易于学习培训和应用。在这篇文章内容，大家将探讨它们是怎样运作起来的，再教大伙儿1些应用层面的技能。

1般大家最广泛的应用方式是将HTML特性放进1个方括号中，称之为特性挑选器。比如：

[href] {
    color: chartreuse;
}

任何具备href特性且沒有更实际的挑选器的html元素如今都会变为黄翠绿色。特性挑选器的特点和类挑选器1致

可是你可使用特性挑选器做更多的事儿。就像你的DNA1样，它们具备嵌入式的逻辑性，可协助您挑选各种各样特性组成和值。 它们不但能够精准的配对标识，类或id挑选器，并且能够配对特性中的任何特性乃至标识符串值。

特性挑选

特性挑选器能够单独存在或更实际1点，例如大家必须挑选具备title特性的全部div标识。

div[title]

还可以根据下面实际操作来挑选具备title特性的div的子元素：

div [title]

必须确立的是，正中间的空格意味着着是后台管理挑选器，即挑选具备该特性的元素的子元素。大家还可以更精准1点，来挑选要想的特性值：

div[title="dna"]

大多数数状况下，特性挑选器不必须引号，但我会应用它们，由于我坚信它能够出示可读性并保证具备优良的适配性

假如你想从历经空格切分后的目录里挑选具备"dna"标识符的特性值，例如“my beautiful dna”或“mutating dna is fun!”，能够在等号前加上1个波浪纹号`~`：

div[title~="dna"]

您能够挑选“dontblamemeblamemydna”或“his-stupidity-is-from-upbringing-not-dna”之类的题目，随后应用美元标记`$`来配对title的末尾：

[title$="dna"]

要配对特性值的前面，比如“dnamutants”或“dna-splicing-for-all”的题目，就用插进标记`^`。

[title^="dna"]

假如你想彻底配对1个值开始的详细单词，可使用管路符来做。例如你不想挑选1个“genealogy”的title，但依然想挑选“gene”和“gene-data”：

[title|="gene"]

也有1个配对任何子标识符串的模糊不清检索特性运算符`*`：

[title*="dna"]

最终要了解的是，您能够加上1个标示，让特性检索不区别尺寸写。 在完毕方括号以前加上`i`：

[title*="DNA" i]

使这些特性挑选器更为强劲的缘故是它们是可层叠的 —— 容许您挑选具备好几个配对因素的元素。

例如你必须寻找 a 标识，它有1个title特性，而且有1个以“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;
}

上面的编码在电脑鼠标悬停时将显示信息1串自定的标识符串。

如今大家早已看到了怎样应用特性挑选器开展挑选，让大家看看1些测试用例。我把它们分成两类： 1般应用技能 和 确诊 。

1般应用技能

键入种类的设定

您能够不一样地设定键入种类，比如电子器件电子邮件与电話：

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给大家的1个特性是“免费下载”，它告知访问器，你猜对了，免费下载该文档而并不是尝试开启它。这针对您期待人们浏览但不期待它们马上开启的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 标识是1种只用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: ⑸px;
  bottom: ⑸px;
}

确诊

这些选项用于协助大家在搭建全过程中或在尝试修补难题时在当地鉴别难题。将这些內容放在大家的生产制造网站上会应用户造成不正确。

沒有controls特性的audio

我不常常应用声频标识，可是当我应用它时，我常常忘掉包括controls特性。 結果：沒有显示信息任何內容。假如您在Firefox中工作中，假如您掩藏了声频元素，或英语的语法或别的1些难题阻拦它出現（仅可用于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);
}

总结

以上所述是网编给大伙儿详细介绍的应用CSS特性挑选器来拼接HTML的DNA的方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！