CSS 属性选择器的深刻挖掘

CSS 属性选择器，能够经过已经存在的属性名或属性值匹配元素。css

属性选择器是在 CSS2 中引入的而且在 CSS3 中获得了很好拓展。本文将会比较全面的介绍属性选择器，尽量的去挖掘这个选择器在不一样场景下的不一样用法。html

简单的语法介绍

[attr]：该选择器选择包含 attr 属性的全部元素，不论 attr 的值为什么。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的全部元素。
[attr~=val]：该选择器仅选择具备 attr 属性的元素，并且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

子串值（Substring value）属性选择器，

下面几个属于 CSS3 新增语法，也被称为“伪正则选择器”，由于它们提供相似 regular expression 的灵活匹配方式。前端

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串

CSS 属性选择器的最基本用法

属性选择器最基本的用法，就是经过元素的属性值去选择 DOM 元素。像这样，将选中全部带 href 属性的DOM 元素：git

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

CodePen Demo -- 属性选择器基本用法github

复杂一点点的用法

层叠选择

div [href]{
...
}

复制代码

多条件复合选择

选择一个 img 标签，它含有 title 属性，而且包含类名为 logo 的元素。正则表达式

img[title][class~=logo]{
...
}
复制代码

伪正则写法

i 参数

忽略类名的大小写限制，选择包含 class 类名包含子字符串为 text，Text，TeXt... 等状况的 p 元素。这里的 i 的含义就是正则里面参数 i 的含义，ignore，忽略大小写的意思。express

p[class*="text" i] {
...
}
复制代码

因此上面的选择器能够选中相似这样的目标元素：浏览器

<p class="text"></p>
<p class="nameText"></p>
<p class="desc textarea"></p>
复制代码

g 参数

与正则表达式不同，参数 g 在这里表示大小写敏感（case-sensitively）。然而，这个属性当前仍未归入标准，支持的浏览器很少。markdown

CodePen Demo -- 属性选择器的伪正则用法oop

配合 `:not()` 伪类

还有一种比较经常使用的场景就是搭配:not() 伪类，完成一些判断检测性的功能。譬以下面这个选择器，就能够选取全部没有 [href] 属性的 a 标签，添加一个红色边框。

a:not([href]){
    border: 1px solid red;
}
复制代码

固然，复杂一点，咱们能够搭配不只仅一个 :not()伪类，像是这样，能够同时多个配合使用，选择一个 href, target, rel 属性都没有的 a 标签：

a:not([href]):not([target]):not([rel]){
    border: 1px solid blue;
}
复制代码

CodePen Demo -- 属性选择器配合 :not 伪类

重写行内样式？

甚至乎，若是有这种场景，咱们还能够覆盖掉行内样式，像这样:

<p style="height: 24px; color: red;">xxxxxx</p>
复制代码

咱们可使用属性选择器强制覆盖掉上述样式：

[style*="color: red"] {
    color: blue !important;
}
复制代码

组合拳用法，搭配伪元素提高用户体验

固然，属性选择器不必定只是单单的进行标签的选择。

配合上伪元素，咱们能够实现不少有助提高用户体验的功能。

角标功能

这里有一个小知识点，伪元素的 content 属性，经过 attr(xxx)，能够读取到对应 DOM 元素标签名为 xxx 的属性的值。

因此，配合属性选择器，咱们能够很容易的实现一些角标功能：

<div count=“5“>Message</div>
复制代码

div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}
复制代码

这里右上角的数字 5 提示角标，就是使用属性选择器配合伪元素实现，能够适应各类长度，以及中英文，可以节省一些标签。CodePen Demo -- 属性选择器实现角标功能

属性选择器配合伪元素实现类 title 功能

咱们都知道，若是给一个图片添加一个 title 属性，当 hover 到图片上面的时，会展现 title 属性里面附加的内容，相似这样：

<img src="xxxxxxxxx" title="风景图片">
复制代码

这里不必定是 img 标签，其余标签添加 title 属性都能有相似的效果。可是这里会有两个问题：

响应太慢，一般鼠标 hover 上去要隔 1s 左右才会出现这个 title 框
框体结构没法自定义，弹出框的样式没法自定义

因此这里，若是咱们但愿有一些本身可以控制样式的可快速响应的浮层，能够自定义一个类 title 属性，咱们把它称做 popTitle，那么能够这样操做：

<p class="title" popTitle="文字弹出">这是一段描述性文字</p>
<p class="title" popTitle="标题A">这是一段描述性文字</p>
复制代码

p[popTitle]:hover::before {
    content: attr(popTitle);
    position: absolute;
    color: red;
    border: 1px solid #000;
    ...
}
复制代码

对比一下，第一个是原生自带的 title 属性，下面两个是使用属性选择器配合伪元素模拟的提示：

浏览器自带的 title 属性延迟响应是添加一层防抖保护，避免频繁触发，这里也能够经过对伪元素添加一个100毫秒级的 transition-delay 实现延迟展现。

CodePen Demo -- 属性选择器配合伪元素实现类 title 功能

商品展现提示效果

好，上面的运用实例咱们再拓展一下，考虑如何更好的运用到实际业务中，其实也是有不少用武之地的。譬如说，经过属性选择器给图片添加标签，相似一些电商网站会用到的一个效果。

咱们但愿给图片添加一些标签，在 hover 图片的时候展现出来。

固然，CSS 中，诸如 <img> 、<input>、<iframe>，这几个标签是不支持伪元素的。

因此这里咱们输出 DOM 的时候，给 img 的父元素带上部分图片描述标签。经过 CSS 去控制这些标签的展现：

<div class="g-wrap" desc1="商品描述AAA" desc2="商品描述BBB">
    <img src="https://xx.baidu.com/timg?xxx" >    
</div>
复制代码

[desc1]::before,
[desc2]::after {
    position: absolute;
    opacity: 0;
}

[desc1]::before {
    content: attr(desc1);
}

[desc2]::after {
    content: attr(desc2);
}

[desc1]:hover::before,
[desc2]:hover::after{
    opacity: 1;
}
复制代码

看看效果：

CodePen Demo -- 经过属性选择器给图片添加标签

属性选择器配合伪元素实现下载提示

咱们知道，HTML5 对标签新增了一个 download 属性，此属性指示浏览器下载 URL 而不是导航到它。

那么，咱们能够利用属性选择器对全部带此类标签的元素进行提示。像这样：

<a href="https://www.xxx.com/logo.png" download="logo">logo</a>
复制代码

[download] {
    position: relative;
    color: hotpink;
}

[download]:hover::before {
    content: "点击可下载此资源！";
    position: absolute;
    ...
}
复制代码

当咱们 hover 到这个连接的时候，就会这样，提示用户，这是一个能够下载的按钮：

CodePen Demo -- 属性选择器配合伪元素作下载提示

属性选择器配合伪元素对连接的协议进行提示(http/https)

如今大部分网站不是切了 https 就是走在切 https 的路上。若是页面上的连接不少或者对跳转页面的协议有要求，使用属性选择器配合伪元素对连接的协议进行提示也不失为一种好方法。

a[href^="http:"]:hover::before {
    content: "这是一个http连接";
    ...
}

a[href^="https:"]:hover::before {
    content: "这是一个https连接";
}
复制代码

CodePen Demo -- 属性选择器配合伪元素对连接的协议进行提示(http/https)

固然，伪元素的内容不必定是纯文字的，为了给用户更好的体验，图或者图片加文字也是能够的。

譬如咱们能够形象化地给 https 连接站点再加一个小绿锁，符合用户的一些常规认知。

这里我将小绿锁的图片使用 base64 嵌入到伪元素当中，简单的使用 text-indent 控制图文的排布：

a[href^="https:"]:hover::before {
    content: "";
    padding-left: 16px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAb0lEQVQoz2NkQAJc5aIc//7962VgYIiDCi1iYmIq/tb5+gdMDROyBqhiGWYmJlVmJiZVBgYGGagYdsBRKvyZu1xUAsbnLheV4CgV/oxbQ4nwf0JiTAwkAkaIU4QaGf4z1uFX+b/pR/e7epJtGJEaAKDXHzEJ3KYmAAAAAElFTkSuQmCC");
    ...
}
复制代码

这里只是一个很是小的 Demo，实际状况是大部分用户并不了解这个小绿锁的含义，因此实际使用应该搭配文字辅助提示。

CodePen Demo -- 属性选择器配合伪元素对https协议进行图文提示

属性选择器对文件类型的处理

也能够对一些可下载资源进行视觉上 icon 的提示。

<ul>
    <li><a href="xxx.doc">Word File</a></li>
    <li><a href="xxx.ppt">PPT File</a></li>
    <li><a href="xxx.PDF">PDF File</a></li>
    <li><a href="xxx.MP3">MP3 File</a></li>
    <li><a href="xxx.avi">AVI File</a></li>
</ul>
复制代码

a[href$=".doc" i]::before {
    content: "doc";
    background: #a9c4f5;
}
a[href$=".ppt" i]::before {
    content: "ppt";
    background: #f8e94f;
}
a[href$=".pdf" i]::before {
    content: "pdf";
    background: #fb807a;
}
a[href$=".mp3" i]::before {
    content: "mp3";
    background: #cb5cf5;
}
a[href$=".avi" i]::before {
    content: "avi";
    background: #5f8ffc;
}
复制代码

CodePen Demo -- 属性选择器选择文件名后缀

属性选择器对 `input` 类型的处理

属性选择器其实对 input 类型的元素是一个很好的帮手，由于 input 经常使用，且常常搭配不少不一样功能的属性值。

只不过，因为 input 类型没法添加伪元素。因此搭配属性选择器更多的经过属性的各类状态改变自身的样式。

简单举个例子，譬如：

<input type="text">
<input type="text" disabled>
复制代码

input[type=text][disabled] { 
    border: 1px solid #aaa;
    background: #ccc; 
}
复制代码

这里，咱们选择了 type=text 而且拥有 disabled 属性的 input 元素，将它的背景色和边框色设置为灰色。给与用户更好的视觉提示。

值得注意的点

注意选择器优先级，`.class` 与 `[class=xxx]` 是否等价

考虑这个问题，下面两个选择器是否等值？

<div class="header">
复制代码

.header {
    color: red;
}

[class~="header"] {
    color: blue;
}
复制代码

上述两个选择器，做用彻底一致。然而，若是是下面这种状况，二者就不同了：

<div id="header">
复制代码

#header{
    color: red;
}

[id="header"] {
    color: blue;
}
复制代码

这里，ID 选择器#header比属性选择器[id="header"]的权重更高，虽然二者可以选择一样的元素，可是二者并不彻底等价。

是否须要引号？

考虑下面三种状况，是否一致？

[class="header"]{ ... }

[class='header']{ ... }

[class=header]{ ... }
复制代码

事实上，从 HTML2 开始，不添加引号的写法就已经获得支持，因此上述三种写法都是正确的。

然而，可以不使用引号也是有限制的，再看看下面这种写法：

a[href=bar] { ... }

a[href^=http://] {... }
复制代码

第二个选择器是个无效选择器，:// 不引发来的话会识别错误，必须使用引号引发来像这样a[href^="http://"]，这里具体的缘由能够看看这篇文章：Unquoted attribute value validator。

因此保险起见，建议都加上引号。

CSS 语义化

编写”具备语义的HTML”原则是现代、专业前端开发的一个基础。固然，咱们常常谈论到的都是 HTML 语义化。

那么，CSS 须要语义化吗？CSS 有语义化吗？例如上述的例子，使用特定的类名或者 id 选择器皆可完成。那么使用属性选择器的理由是什么？

个人理解是，属性（attribute）自己已经具备必定的语义，表达了元素的某些特征或者功能，利用属性选取元素再进行对该属性值的特定操做，必定程度上也能够辅助提高代码的语义化。至少的提高了 CSS 代码的可读性。可是 CSS 是否须要语义化这个问题就见仁见智了。

最后

这里有几篇文章还涵盖了不少其余方面使用，能够对比观看：

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。