要提高前端布局能力，这些 CSS 属性须要学习下！

做者：John
译者：前端小智
来源：smashingmagazine

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

属性选择器很是神奇。它们可使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。可是不要担忧，虽然属性选择器很是复杂和强大，可是它们很容易学习和使用。在本文中，咱们将讨论它们是如何运行的，并给出一些如何使用它们的想法。

一般将 HTML 属性放在方括号中，称为属性选择器，以下：

[href] {
   color: red;
}

这样任何具备href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

注:更多关于笼匹配的CSS特异性，你能够阅读CSS特性:你应该知道的事情，或者若是你喜欢星球大战:CSS特性战争。

可是你可使用属性选择器作得更多。就像你的 DNA 同样，它们有内在的逻辑来帮助你选择各类属性组合和值。它们能够匹配属性中的任何属性，甚至字符串值，而不是像标签、类或id选择器那样精确匹配。

属性选择器

属性选择器能够独立存在，更具体地说，若是须要选择全部具备title属性的div标签，能够这么作：

div[title]

但你也能够经过如下操做选择具备 title 属性的 div 的子元素

div [title]

须要说明的是，它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格同样)，而它们之间的空格意味着后代选择器，即选择具备该属性的元素的子元素。

你能够更精细地选择具体属性值的属性。

div[title="dna"]

上面选择了全部具备确切名称dna的div,虽然有选择器算法能够处理每种状况（以及更多），但这里不会选择“dna is awesome”或“dnamutation”的标题。

注意:在大多数状况下，属性选择器中不须要引号，可是我使用它们，由于我相信它能够提升清代码的可读性，并确保边界用例可以正常工做。

若是你想选择 title 包含 dna的元素，如 “my beautiful dna” 或者 “mutating dna is fun!” ，可使用波浪号（~）。

div[title~="dna"]

若是你想匹配以 dna 结尾的 title,如　 “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ，刚可使用$标志符：

[title$="dna"]

若是你想匹配以 dna 开头的 title,如　 “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>

.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;
}

重写特定的内联样式

有时候你会遇到一些内联样式，这些样式会影响布局，但这些内联样式咱们又没修改。那么如下是一种方法。

若是你道要覆盖的确切属性和值，而且但愿在它出现的任何地方覆盖它，那么这种方法的效果最好。

对于此示例，元素的边距以像素为单位设置，但须要在 em 中进行扩展和设置，以便在用户更改默认字体大小时能够正确地从新调整元素。

<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;
}

---

原文：https://www.smashingmagazine....

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。