我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - css-属性获得节点
css节点选择器,通过属性选取节点attr()和[attr='']对比(图3-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验文章。测试环境:win10chrome@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>

更多参考文章:

苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - 属性选择方式1
css节点选择器,通过属性选取节点attr()和[attr='']对比(图3-2)

这个: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>

苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - 属性选择方式2
css节点选择器,通过属性选取节点attr()和[attr='']对比(图3-3)

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

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

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

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

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

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

总结

更多苏南大叔的css相关文章,请点击:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css