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

布满荆棘的人生 2022-12-20 15:54 25阅读 0赞

> 作者：John  
> 译者：前端小智  
> 来源：smashingmagazine

**最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。**

github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]

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

通常将 `HTML` 属性放在方括号中，称为属性选择器，如下：

[href] {
       color: red;
    }

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

**注**:更多关于笼匹配的CSS特异性，你可以阅读[CSS特性:你应该知道的事情][CSS]，或者如果你喜欢星球大战:[CSS特性战争][CSS 1]。

但是你可以使用属性选择器做得更多。就像你的 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.com/2018/10/attribute-selectors-splicing-html-dna-css/

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

--------------------

## 交流 ##

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

[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[CSS]: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
[CSS 1]: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi