css节点选择器,通过属性选取节点attr()和[attr='']对比
发布于 作者:苏南大叔 来源:程序如此灵动~

前面两篇文章都是讲关于css
的写法的,一个是关于lang
属性,另外一个是讲关于属性模糊匹配规则的。细心的你可以发现:代码中出现了两者关于对属性操作的写法。本文就对这两种写法做个对比。
![苏南大叔到底是谁?!? - css-属性获得节点 苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - css-属性获得节点](/usr/img/water/41/41805f6b6afb2515.png)
苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验文章。测试环境:win10
,chrome@123.0.6312.105
。
方式一,:attr()【不推荐】
参考代码如下:
更多参考文章:
![解决了问题,节约了时间!我要为苏南大叔买瓶饮料! - 属性选择方式1 苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - 属性选择方式1](/usr/img/water/7c/7cf5e184c3fe395d.png)
这个:attr()
这种写法里面,代码可以得出的结论是:
attr
必须是特定的属性(常见的属性也不一定支持的),并不支持自定义属性。()
里面并不能写单引号或者双引号。也就是说,里面的值也很可能是用作变量处理的,而不是字符串。如果加上的话,反而会导致节点匹配失败。
方式二,[attr='']【推荐】
参考代码如下:
![解决了问题,节约了时间!我要为苏南大叔买瓶饮料! - 属性选择方式2 苏南大叔:css节点选择器,通过属性选取节点attr()和[attr='']对比 - 属性选择方式2](/usr/img/water/f6/f673f66af0275c1a.png)
这个[attr='']
代码得出的结论是:
- 这里的
attr
和值,都可以自定义的,更加灵活。所以更加推荐使用。 - 值的外面是包裹单引号或双引号的,所以它是字符串,不是变量。
除了这种选择方式,还可以使用各种运算符号。参考文章:
无属性选取:not([attr])
这里特别说明一下,css
如何选取没有某个属性的节点,使用的就是:not([attr])
。比如,没有设置target
属性的a
标签。
总结
更多苏南大叔的css
相关文章,请点击:


