css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
讨论一下css
节点选择的问题,可以直接搜索到具有某个节点属性,也可以对这个属性值进行进一步的运算。这就是本文要讨论的问题,这些讨论的运算符包括:= ~= |= ^= $= *=
。
苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验总结。本文测试环境:win10
,chrome@123.0.6312.105
。
直接属性选择=
最基础的就是=
运算符,例如:
<style>
p[lang="zh"] {
color:red;
}
p[lang="zh"][title="zhongguo"] {
font-weight:bold;
}
p[lang="zh"][title="zhongguo"][diy="sn"] {
text-decoration: underline;
}
p[class="china peking"] {
background:blue;
}
p[class="peking china"] {
background:yellow;
}
</style>
<p lang="zh" class="china" title="zhongguo" diy="sn">中国</p>
<p lang="zh" class="china peking" title="zhongguobeijing">中国北京</p>
<p class="peking china">中国北京朝阳</p>
可以做组合运算,还可以自定义属性,对于class
这种特殊的可以写多个类名的情况,顺序也很重要。
~=
运算
~=
要求对应属性值完全匹配,不多不少。当然,对于class
这种可以写多个值的情况,要求其中值之一完全匹配。
<style>
p[class~="China"] {
background:blue;
}
p[title~="beijing"] {
font-weight: bold;
}
</style>
<p class="China" title="zhongguo">中国</p>
<p class="China peking" title="beijing">中国北京</p>
<p class="China peking chaoyang" title="beijing-chaoyang">中国北京朝阳</p>
^=
运算
因为^
在正则匹配中经常出现,所以比较好理解,^=
运算以对应字符开始即可,class
属性被用作字符串解释。
<style>
p[class^="Ch"] {
background:blue;
}
p[title^="bei"] {
font-weight: bold;
}
</style>
<p class="China" title="zhongguo">中国</p>
<p class="China peking" title="beijing">中国北京</p>
<p class="China peking chaoyang" title="beijing-chaoyang">中国北京朝阳</p>
$=
运算
相对应的$=
运算,就是以对应字符结尾的即可。class
属性被用作字符串解释。
<style>
p[class$="na"] {
background:blue;
}
p[title$="ng"] {
font-weight: bold;
}
</style>
<p class="China" title="zhongguo">中国</p>
<p class="China peking" title="beijing">中国北京</p>
<p class="China peking chaoyang" title="beijing-chaoyang">中国北京朝阳</p>
|=
运算
|=
运算比较特殊,结合了^=
和~=
两种特性,要求完全匹配字符串或者匹配字符串-
。这里的特殊属性class
也是做个一个整体处理的。
<style>
p[class|="chaoyang"] {
background:blue;
}
p[title|="beijing"] {
font-weight: bold;
}
</style>
<p class="China" title="zhongguo">中国</p>
<p class="China peking" title="beijing">中国北京</p>
<p class="China peking chaoyang" title="beijing-chaoyang">中国北京朝阳</p>
*=
运算
*=
就是标准的模糊匹配串包含操作了。
<style>
p[class*="chaoyang"] {
background:blue;
}
p[title*="beijing"] {
font-weight: bold;
}
</style>
<p class="China" title="zhongguo">中国</p>
<p class="China peking" title="beijing">中国北京</p>
<p class="China peking chaoyang" title="beijing-chaoyang">中国北京朝阳</p>
更多例子
实际上苏南大叔的页面上也用了这个方法,做了链接安全性的判断。代码如下:
<style>
@font-face {
font-family: Material Icons;
font-style: normal;
font-weight: 400;
src: url(https://newsn.net/usr/themes/panda/assets/fonts/MaterialIcons-Regular.eot);
src: local("Material Icons"), local("MaterialIcons-Regular"),
url(https://newsn.net/usr/themes/panda/assets/fonts/MaterialIcons-Regular.woff2) format("woff2"),
url(https://newsn.net/usr/themes/panda/assets/fonts/MaterialIcons-Regular.woff) format("woff"),
url(https://newsn.net/usr/themes/panda/assets/fonts/MaterialIcons-Regular.ttf) format("truetype");
}
a[href^="https://newsn.net/tag/"]:before
{
content: "\e0e5";
color: #e47e00;
}
a[href^="https://newsn.net/say/"]:before
{
content: "\e32a";
color: green;
}
a[href^="http://"]:before, a[href^="https://"]:before
{
font-family: Material Icons;
font-weight: 400;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
vertical-align: text-bottom;
font-size: 1em;
width: 1em;
height: 1em;
margin-right: 0.5em;
text-decoration: none;
border-bottom: none;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<a href="https://newsn.net/say/css.html" target="_blank">/say/css.html</a>
<br />
<a href="https://newsn.net/tag/css/" target="_blank">/tag/css/</a>
表格总结
通过实验可以发现,这几种运算符对于精准度,以及对象匹配上都是有区别的。特别是class
属性,对待为一个字符串,还是一个数组的问题,区别很明显。
操作符 | 操作行为 | 是否精准 | 是否全匹配 | 对待属性 |
---|---|---|---|---|
= | 匹配完整 | 精准 | 全 | 字符串 |
^= | 匹配开端 | 精准 | 非 | 字符串 |
$= | 匹配结尾 | 精准 | 非 | 字符串 |
竖线= | 完整匹配或匹配“开头-” | (半)精准 | 全或非 | 字符串 |
*= | 模糊匹配 | 模糊 | 部分 | 字符串 |
~= | 精准匹配某个数组对象 | 精准 | 数组对象 | 数组 |
相关文章
- https://newsn.net/say/css-input-outline.html
- https://newsn.net/say/css-calc.html
- https://newsn.net/say/css-lang.html
结语
更多苏南大叔的css
相关文章总结,请参考:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。