css节点选择器，通过属性选取节点attr()和[attr='']对比

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

前面两篇文章都是讲关于css的写法的，一个是关于lang属性，另外一个是讲关于属性模糊匹配规则的。细心的你可以发现：代码中出现了两者关于对属性操作的写法。本文就对这两种写法做个对比。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。测试环境：win10，chrome@123.0.6312.105。

方式一，:attr()【不推荐】

参考代码如下：

<style>
  a:lang(zh){
    background-color: aqua;
  }
  a:lang("zh"){
    background-color: black;
  }
  a:title(aa){
    background-color: blue;
  }
  a:diy(dd){
    background-color: red;
  }
  a:target(){
    background: yellow;
  }
  a:target(_self){
    background: blue;
  }
  a:target(_blank){
    background: red;
  }
</style>
<a href="https://newsn.net/" diy="dd" lang="zh">链接默认</a>
<a href="https://newsn.net/" target="" title="aa">链接默认</a>
<a href="https://newsn.net/" target="_self">链接本页</a>
<a href="https://newsn.net/" target="_blank">链接新开</a>

更多参考文章：

• https://newsn.net/say/css-lang.html

这个:attr()这种写法里面，代码可以得出的结论是：

• attr必须是特定的属性（常见的属性也不一定支持的），并不支持自定义属性。
• ()里面并不能写单引号或者双引号。也就是说，里面的值也很可能是用作变量处理的，而不是字符串。如果加上的话，反而会导致节点匹配失败。

方式二，[attr='']【推荐】

参考代码如下：

<style>
  a{
    color:white;
  }
  a:not([target]){
    background:peru;
  }
  a[diy="dd"]{
    background:aqua;
  }
  a[title="aa"]{
    background:darkblue;
  }
  a[lang="zh"]{
    background: blueviolet;
  }
  a[target=""]{
    background:yellow;
  }
  a[target="_self"]{
    background:pink;
  }
  a[target="_blank"]{
    background:brown;
  }
</style>
<a href="https://newsn.net/">默认</a>
<a href="https://newsn.net/" diy="dd">自定义</a>
<a href="https://newsn.net/" title="aa">标题</a>
<a href="https://newsn.net/" lang="zh">语言</a>
<a href="https://newsn.net/" target="_self">本页</a>
<a href="https://newsn.net/" target="_blank">新开</a>

这个[attr='']代码得出的结论是：

• 这里的attr和值，都可以自定义的，更加灵活。所以更加推荐使用。
• 值的外面是包裹单引号或双引号的，所以它是字符串，不是变量。

除了这种选择方式，还可以使用各种运算符号。参考文章：

• https://newsn.net/say/css-attr-find.html

无属性选取:not([attr])

这里特别说明一下，css如何选取没有某个属性的节点，使用的就是:not([attr])。比如，没有设置target属性的a标签。

a:not([target]){
   background:peru;
}

总结

更多苏南大叔的css相关文章，请点击：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。