关于前端:要提升前端布局能力这些-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;}

你能够区别对待外部和内部链接，并将平安链接设置为与不平安链接不同：

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
         文件名称：
         文件大小：
         下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
        下载地址：
    :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
         文件名称：
         文件大小：
         下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
        下载地址：
    [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);
}

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

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

我不常常应用 audio 标签，然而当我应用它时，我常常遗记蕴含 controls 属性。后果：没有显示任何内容。如果你在 Firefox，如果暗藏了音频元素，或者语法或其余一些问题阻止它呈现（仅实用于 Firefox），此代码能够帮忙你解决问题：

audio:not([controls]) {
  width: 100px;
  height: 20px;
  background-color: chartreuse;
  display: block;
}

没有 alt 文本的图像是可拜访性的噩梦。只需查看页面就很难找到它们，但如果增加它们，它们就会弹出来（当页面图片加载失败时，alt 文字能够更好的解释图片的作用）：

img:not([alt]) { /* no alt attribute */ 
  outline: 2em solid chartreuse; 
}
img[alt=""] { /* alt attribute is blank */ 
  outline: 2em solid cadetblue; 
}

网页能够是内容管理系统和插件，框架和代码的汇合，确定哪些 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);
}

如果须要查看暗藏元素或暗藏输出的地位，能够应用它们来显示

[hidden], [type="hidden"] {display: block;}

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

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

关于前端:要提升前端布局能力这些-CSS-属性需要学习下

属性选择器

个别用处

输出类型款式的设置

显示电话链接

外部链接 vs 内部链接，平安链接 vs 非平安链接

下载图标

笼罩或从新应用已废除 / 弃用的代码

重写特定的内联款式

显示文件类型

html 手风琴菜单

打印链接

自定义提醒

便捷键

诊断

没有 controls 属性的 audio

没有 `alt` 文本

异步 Javascript 文件

JavaScript 事件元素

暗藏项

交换

Just My Socks（注册教程内含优惠码）

关于前端:要提升前端布局能力这些-CSS-属性需要学习下

属性选择器

个别用处

输出类型款式的设置

显示电话链接

外部链接 vs 内部链接，平安链接 vs 非平安链接

下载图标

笼罩或从新应用已废除 / 弃用的代码

重写特定的内联款式

显示文件类型

html 手风琴菜单

打印链接

自定义提醒

便捷键

诊断

没有 controls 属性的 audio

没有 alt 文本

异步 Javascript 文件

JavaScript 事件元素

暗藏项

交换

Just My Socks（注册教程 内含优惠码）

没有 `alt` 文本

Just My Socks（注册教程内含优惠码）