善用你的html的属性选择符

最新推荐文章于 2025-09-06 17:01:08 发布

转载最新推荐文章于 2025-09-06 17:01:08 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/473556

在学习Css3.0选择符的时候，参考了《CSS3.0参考手册》。有个地方没有说明，于是被坑了半个小时呀！

在这里和大家分享一下，在选择符分类那里，有一类是属性选择符是通过字串来匹配的！

形式有以下几种：

属性名选择符
E[att] -- 匹配文档中具有att属性的E元素
属性值选择符
E[att=val] -- 匹配文档中具有att属性且其值为val的E元素
E[att~=val] -- 匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(val不能包含空格)的E元素
E[att|=val] -- 匹配文档中具有att属性且其中一个值为val，或者以val开头紧随其后的是连字符-的E元素（主要用来允许语言编码的匹配，例如HTML中的hreflang属性。关于lang（或 xml:lang）语言码的比配，可查看:lang伪类）
属性值子串选择符
E[att^=val] -- 匹配文档中具有att属性且其值的前缀为val的E元素
E[att$=val] -- 匹配文档中具有att属性且其值的后缀为val的E元素
E[att*=val] -- 匹配文档中具有att属性且其包含val的E元素

在上述的引用引用中，橙色的三个便是经常使用的!

但使用的时候，我们应该注意一个坑，就是这些属性选择符并不是所有标签都适用，它只适用于HTML文档性质的标签，常见的如<p>、<del>、<a>这些！当你将属性选择符用于一些非文档性质的元素时，它不会进行匹配！

还有需要注意的是，我们这些是属性选择器，也是css的样式，所以需要在头部<head>或者外部css文件来表明。

下面写一个简单的例子。

 
          <!DOCTYPE html>
         
          <html>
         
          <head> 
         
          <style> 
         
          del[id$=
          "l1"
          ] 
         
          { 
         
          color:green; 
         
          } 
         
          </style> 
         
          </head> 
         
          <body> 
         
          <del id=
          "del1"
          >This is del1</del> 
         
          <br> 
         
          <del id=
          "del2"
          >This is del2</del> 
         
          <br> 
         
          </body> 
         
          </html>

可以知道，"This is del1"的内容将会变成绿色！

如图：

同时我们可以测试一下块级区域，通过字串选择符来匹配一下！便可以知道对于块级区域无效

 
          <!DOCTYPE html>
         
          <
          html
          > 
         
          <
          head
          > 
         
          <
          style
          > 
         
          div[id$="v1"] 
         
          { 
         
          color:green; 
         
          } 
         
          </
          style
          > 
         
          </
          head
          > 
         
          <
          body
          > 
         
          <
          div 
          id
          =
          "div1" 
          style
          =
          "color:red;width: 300px;height:200px;border:1px solid"
          >This is div1</
          div
          > 
         
          <
          br
          > 
         
          <
          div 
          id
          =
          "div2" 
          style
          =
          "color:red;width: 300px;height:200px;border:1px solid"
          >This is div2</
          div
          > 
         
          <
          br
          > 
         
          </
          body
          > 
         
          </
          html
          >