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://seosn.com/usr/themes/panda/assets/fonts/MaterialIcons-Regular.eot);
    src: local("Material Icons"), local("MaterialIcons-Regular"),
      url(https://seosn.com/usr/themes/panda/assets/fonts/MaterialIcons-Regular.woff2) format("woff2"),
      url(https://seosn.com/usr/themes/panda/assets/fonts/MaterialIcons-Regular.woff) format("woff"),
      url(https://seosn.com/usr/themes/panda/assets/fonts/MaterialIcons-Regular.ttf) format("truetype");
  }
  a[href^="https://seosn.com/tag/"]:before
  {
    content: "\e0e5";
    color: #e47e00;
  }
  a[href^="https://seosn.com/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://seosn.com/say/css.html" target="_blank">/say/css.html</a>
<br />
<a href="https://seosn.com/tag/css/" target="_blank">/tag/css/</a>

表格总结

通过实验可以发现，这几种运算符对于精准度，以及对象匹配上都是有区别的。特别是class属性，对待为一个字符串，还是一个数组的问题，区别很明显。

相关文章

• https://seosn.com/say/css-input-outline.html
• https://seosn.com/say/css-calc.html
• https://seosn.com/say/css-lang.html

结语

更多苏南大叔的css相关文章总结，请参考：

• https://seosn.com/tag/css/

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