CSS 属性选择器深入讲解

CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。

属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。

 

简单的语法介绍

  • [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 元素:

 
 
 
 
[href] {
    color: red;
}

 

复杂一点点的用法

层叠选择

 
 
 
div [href]{
...
}

多条件复合选择

选择一个 img 标签,它含有 title 属性,并且包含类名为 logo 的元素。

 
 
 
img[title][class~=logo]{
...
}

伪正则写法

  • i 参数

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

 
 
 
p[class*="text" i] {
...
}

所以上面的选择器可以选中类似这样的目标元素:

 
 
 

"text">

"nameText">

"desc textarea">

  • g 参数

与正则表达式不一样,参数 g 在这里表示大小写敏感(case-sensitively)。然而,这个属性当前仍未纳入标准,支持的浏览器不多。

 

配合 :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;
}

 

 

重写行内样式?

甚至乎,如果有这种场景,我们还可以覆盖掉行内样式,像这样:

 
<p style="height: 24px; color: red;">xxxxxxp>

我们可以使用属性选择器强制覆盖掉上述样式:

 
 
 
[style*="color: red"] {
    color: blue !important;
}

 

组合拳用法,搭配伪元素提升用户体验

当然,属性选择器不一定只是单单的进行标签的选择。

配合上伪元素,我们可以实现很多有助提升用户体验的功能。

 

角标功能

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

所以,配合属性选择器,我们可以很容易的实现一些角标功能:

 
<div count=“5“>Messagediv>

 
 
div {
    position: relative;
    width: 200px;
    height: 64px;
}
 
div::before {
    content: attr(count);
    ...

CSS 属性选择器深入讲解

 

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

 

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

我们都知道,如果给一个图片添加一个 title 属性,当 hover 到图片上面的时,会展示 title 属性里面附加的内容,类似这样:

1
<img src="xxxxxxxxx" title="风景图片">

CSS 属性选择器深入讲解

这里不一定是 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 属性,下面两个是使用属性选择器配合伪元素模拟的提示: 

CSS 属性选择器深入讲解

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

 

商品展示提示效果

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

我们希望给图片添加一些标签,在 hover 图片的时候展示出来。

当然,CSS 中,诸如  、