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

讨论一下css节点选择的问题,可以直接搜索到具有某个节点属性,也可以对这个属性值进行进一步的运算。这就是本文要讨论的问题,这些讨论的运算符包括:= ~= |= ^= $= *=

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验总结。本文测试环境:win10chrome@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这种特殊的可以写多个类名的情况,顺序也很重要。

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算1
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-2)

~=运算

~=要求对应属性值完全匹配,不多不少。当然,对于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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算2
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-3)

^=运算

因为^在正则匹配中经常出现,所以比较好理解,^=运算以对应字符开始即可,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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算3
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-4)

$=运算

相对应的$=运算,就是以对应字符结尾的即可。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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算4
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-5)

|=运算

|=运算比较特殊,结合了^=~=两种特性,要求完全匹配字符串或者匹配字符串-。这里的特殊属性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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算5
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-6)

*=运算

*=就是标准的模糊匹配串包含操作了。

<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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - css属性运算6
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-7)

更多例子

实际上苏南大叔的页面上也用了这个方法,做了链接安全性的判断。代码如下:

<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>

苏南大叔:css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比 - 效果更多
css节点选择器,对属性运算特殊符号^$*|~=的几种方式对比(图8-8)

表格总结

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

操作符操作行为是否精准是否全匹配对待属性
=匹配完整精准字符串
^=匹配开端精准字符串
$=匹配结尾精准字符串
竖线=完整匹配或匹配“开头-”(半)精准全或非字符串
*=模糊匹配模糊部分字符串
~=精准匹配某个数组对象精准数组对象数组

相关文章

结语

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

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

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

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

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