CSS not()选择器的使用

最近网站想在外链上添加一个标记.文章是由markdown生成.在不使用PHP.只是一个简单的标识,不想动JS. 通过CSS选择器生成.

JS也可以用document.querySelector().

示例

条件:

  1. 外链,非hi-arkin.com的a标签
  2. 模糊匹配hi-arkin.com

如下有下面链接:

    <a href="http://hi-arkin.com">内链</a>
    <a href="http://baidu.com">百度</a>
    <a href="https://hi-arkin.com ">内链2</a>
    <a href="https://www.hi-arkin.com ">内链3</a>
    <a >空链接</a>

获取所有A链接:

Array.from(document.querySelectorAll("a"),function(it,index)=>{
    return it.href;
})

注:
Array.from 把nodeList生成数组.

所有非空链接:

 document.querySelectorAll("a[href]")

含有"http://hi-arkin.com"的链接:

document.querySelectorAll("a[href='http://hi-arkin.com']")

包含域名hi-arkin.com的链接:

[说明]
[href*=xxx]:模糊匹配,如,[href*='hi-arkin.com'],包含"hi-arkin.com"的
[href^=xxx]:前缀匹配,如,[href^='https://'],"https"开头的
[href$=xxx]:后续匹配,如,[href$='.com'],".com"结尾的

document.querySelectorAll("a[href*='hi-arkin.com']")

所有外链
在上面基础上除反.使用:not选择器

document.querySelectorAll("a:not([href*='hi-arkin.com'])")

过滤空链接
条件可以连写,刚才非空链接 and 非 "hi-arkin.com"的链接

document.querySelectorAll("a[href]:not([href*='hi-arkin.com'])")

增加一些复杂的条件:

    <a href="">空白链接</a>
    <a href="#">hash</a>
    <a href="javascript:void(0)">hash</a>
    <a href="   http://google.com">google</a>
    <a href="https://www.Hi-Arkin.com/index.html">内链4大写</a>
    <a href="#http">只有http文字</a>
    <a href="https://www.qq.com">QQ</a>
<style>

再用 a[href]:not([href*='hi-arkin.com']) 选择:

很多条件满足不了,在一步步过滤.

忽略大小写
和正则一样,i 忽略大小写.
改成 a[href]:not([href*='hi-arkin.com' i])

document.querySelectorAll("a[href]:not([href*='hi-arkin.com' i])")

可以匹配大小写的"hi-arkin"

只需要带http://或https://
,逗号或选择器.
a[href^='http://'i],a[href^='https://'i] 由于属性可能前后有空白字符,还是继续使用模糊选择器.
a[href*='http://'i],a[href*='https://'i]

document.querySelectorAll("a[href*='http://'i],a[href*='https://'i]")

最后,组合成:

a[href*='http://'i]:not([href*='hi-arkin.com'i]),
a[href*='https://'i]:not([href*='hi-arkin.com'i])
document.querySelectorAll("a[href*='http://'i]:not([href*='hi-arkin.com'i]),a[href*='https://'i]:not([href*='hi-arkin.com'i])")

示例效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <a href="http://hi-arkin.com">内链</a><br/>
    <a href="http://baidu.com">百度</a><br/>
    <a href='https://hi-arkin.com '>内链2</a><br/>
    <a href="https://www.hi-arkin.com ">内链3</a><br/>
    <a >空链接</a><br/>
    <a href="">空白链接</a><br/>
    <a href="#">hash</a><br/>
    <a href="javascript:void(0)">JS</a><br/>
    <a href="   http://google.com">google</a><br/>
    <a href="https://www.Hi-Arkin.com/index.html">内链4大写</a><br/>
    <a href="#http">只有http文字</a><br/>
    <a href="https://www.qq.com">QQ</a><br/>
</body>
<style>
    a[href*='http://'i]:not([href*='hi-arkin.com'i])::after,
    a[href*='https://'i]:not([href*='hi-arkin.com'i])::after {
        content: "外链";
        color: red;
        font-size: 12px;
        display: inline-block;
        position: relative;
        margin-top: -12px;
        margin-right: 2em;
        padding:2px;
        opacity: .7;
    }
</style>
<script>
    const links=document.querySelectorAll(`a[href*='http://'i]:not([href*='hi-arkin.com'i])
    ,a[href*='https://'i]:not([href*='hi-arkin.com'i])`);
    links.forEach(function(link){
        link.setAttribute("target","_blank");
        link.addEventListener("click",function(event){
            
            const res=confirm("确认跳到站外?");
            if(!res){
                event.preventDefault();
            }
        })
    })
</script>
</html>

当然用JS就没必须那么麻烦的选择器.只过滤加一个filter过滤器.更好的控制.这个只是演示复杂的css选择器.

参考

[1] Array.from

[2]document.querySelectorAll

[3]简单选择器

原作者:阿金
本文地址：https://hi-arkin.com/archives/css-selector.html

标签: css3 javascript querySelector

（本篇完）

评论