CSS 属性选择器可以通过预先存在的属性名称或属性值来匹配元素。
属性选择器是在 CSS2 中引入的，并且在 CSS3 中得到了很好的扩展。 本文将更全面地介绍属性选择器，并尝试尽可能探索这个选择器在不同场景下的不同用途。
子串值（Substringvalue）属性选择器的简单句子介绍
下面是CSS3中的新句子，也被称为“伪正则选择器”，因为它们提供了类似于正则表达式的灵活匹配方法。
CSS属性选择器最基本的用法
属性选择器最基本的用途是通过属性值选择 DOM 元素。 像这样，所有具有 href 属性的 DOM 元素都将被选择：
[href] {
color: red;
}
CodePenDemo--属性选择器的基本用法
稍微复杂一点的用法级联选择
div [href]{
...
}
多条件复合选择
选择一个具有丰富标题属性，但包含带有类名徽标的元素的img标签。
img[title][class~=logo]{
...
}
伪正则写作
忽略类名的大小写限制，选择包含类类名的子字符串包括text、Text、TeXt...等的p元素。
这里i的含义就是正则化上面参数i的含义，忽略，忽略大小写的含义。
p[class*="text" i] {
...
}
所以前面的选择器可以选择这样的目标元素：
<p class="text"></p>
<p class="nameText"></p>
<p class="desc textarea"></p>
与正则表达式不同的是，这里的参数g表示区分大小写。 然而，该属性目前尚未标准化，并且许多浏览器不支持。
CodePenDemo--属性选择器的伪正则用法
用：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;
}
CodePenDemo--属性选择器：不是伪类
重画内联样式？
甚至，如果存在这些场景，我们也可以重写内联样式，如下所示：
<p style="height: 24px; color: red;">xxxxxx</p>
我们可以使用属性选择器来强制覆盖上述样式：
[style*="color: red"] {
color: blue !important;
}
组合拳击使用css父选择器，配合伪元素提升用户体验
事实上，属性选择器不一定只是用于标签选择。
通过伪元素，我们可以实现许多有助于提高用户体验的功能。
1.角标功能
这里有一个小知识点，伪元素的content属性css父选择器，通过attr(xxx)，可以读取名为xxx的DOM元素标签对应的属性值。
因此，借助属性选择器，我们可以轻松实现一些角标功能：
<div count=“5“>Message</div>
div {
position: relative;
width: 200px;
height: 64px;
}
div::before {
content: attr(count);
...
}
这里右上角的数字5提示是利用属性选择器和伪元素来实现的，可以适应各种宽度，以及中文和英文，从而节省一些标签。 CodePenDemo--属性选择器实现角标功能
2、属性选择器配合伪元素实现类标题功能
我们都知道，如果给图片添加了title属性，当鼠标悬停到图片中时，会显示title属性附带的内容，类似这样：
<img src="xxxxxxxxx" title="风景图片">
这里不一定是img标签，给其他标签添加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属性延迟响应是为了增加一层焦点保护，防止频繁触发。 这里，还可以给伪元素添加100纳秒的transition-delay，实现延迟显示。
CodePenDemo——属性选择器配合伪元素实现类似标题的功能
3、商品展示提示疗效
好吧，我们来扩展一下里面的应用示例，考虑一下如何更好的应用到实际业务中，虽然用途还是很多的。 例如，通过属性选择器为图片添加标签，类似于一些电子商务网站会使用的一个疗效。
我们想给图片添加一些标签，并在悬停图片时显示它们。
实际上，例如在 CSS 中
,,, 这些标签不支持伪元素。
所以我们这里输出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;
}
看看效果：
CodePenDemo--通过属性选择器为图片添加标签
4.属性选择器配合伪元素实现下载提示
我们知道 HTML5 在标签中添加了 download 属性，该属性指示浏览器下载 URL，而不是导航到该 URL。
这样，我们就可以使用属性选择器来提示所有带有该标签的元素。 像这样：
<a href="https://www.xxx.com/logo.png" download="logo">logo</a>
[download] {
position: relative;
color: hotpink;
}
[download]:hover::before {
content: "点击可下载此资源！";
position: absolute;
...
}
当我们将鼠标悬停到此链接时会发生这种情况，提示用户这是一个可以下载的按钮：
CodePenDemo--以伪元素作为下载提示的属性选择器
属性选择器配合伪元素提示链接的契约（http/https）
现在大部分网站要么已经砍掉了https，要么正在砍掉https。 如果页面链接较多或者对跳转页面的收缩有要求，使用属性选择器和伪元素来提示链接的收缩也是一个好方法。
a[href^="http:"]:hover::before {
content: "这是一个http链接";
...
}
a[href^="https:"]:hover::before {
content: "这是一个https链接";
}
CodePenDemo--属性选择器配合伪元素提示链接的契约（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");
...}
这只是一个非常小的演示。 实际情况是大多数用户不明白这个小绿锁的含义，所以应该配合文字辅助提示使用。
CodePenDemo--属性选择器配合伪元素为https合约提供图文提示
文件类型的属性选择器处理
还可以为某些可下载资源提供可视化图标提示。
<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;
}
CodePenDemo--选择文件名后缀的属性选择器
属性选择器对输入类型的处理
虽然属性选择器对于输入类型元素来说是一个非常好的帮手，但是因为输入常用，而且往往会匹配很多功能不同的属性值。
然而，由于输入类型的原因，很难添加伪元素。 因此，有了属性选择器，就可以更多地通过属性的各种状态来改变自己的风格。
举一个简单的例子，比如：
<input type="text">
<input type="text" disabled>
input[type=text][disabled] {
border: 1px solid #aaa;
background: #ccc;
}
在这里，我们选择 type=text 且禁用属性的输入元素，并将其背景颜色和边框颜色设置为蓝色。 为用户提供更好的视觉提示。
值得注意的点 注意选择器优先级，.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 选择器来完成。 以这种方式使用属性选择器的原因是什么？
我的理解是属性本身已经具有一定的语义，表达了元素的个体特征或功能。 借助属性来选择元素，然后对属性值进行特定的操作，也能在一定程度上帮助提高代码效率。 语义的。 至少提高CSS代码的可读性。 而 CSS 是否需要语义化的问题是见仁见智的。
发表评论