:not反向选择器,模糊选择器示例
CSS not()选择器的使用
最近网站想在外链上添加一个标记.文章是由markdown生成.在不使用PHP.只是一个简单的标识,不想动JS. 通过CSS选择器生成.
JS也可以用document.querySelector()
.
示例
条件:
- 外链,非hi-arkin.com的a标签
- 模糊匹配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
[3]简单选择器
原作者:阿金
本文地址:https://hi-arkin.com/archives/css-selector.html