我正在开发一个依靠用户输入来创建脚本的网站
作为深度防御解决方案,我添加了黑名单保护,以忽略与外部源的所有链接。我尝试了以下代码段,但它不起作用(我的浏览器支持它,因为w3schools示例可在其上运行):

    [href~=//]
    {
        display: none;
    }

最佳答案

您使用的选择器有一个细微的差别:


[attribute~="value"]-这会检查一个特定的单词(即用空格或确切的字符串包裹)
[attribute*="value"]-这将检查是否包含给定的一组文本。


您会看到第二种方法有效,而第一种方法无效。

此外,您将要确保具有要定位的特定元素,并且将值包装在引号中,如下所示:

a[href*='//']{
        display: none;
}






a[href*='//'] {
  display: none;
}

/* Added to demonstrate selector differences */
a[href~='//'] {
  color: green;
  display: block;
}

<h4>[href*="value"] Examples</h4>
<a href='http://www.google.com'>Hidden</a>
<a href='stackoverflow.com'>Shown</a>
<a href='Check // this out'>Green</a>

<h4>[href~="value"] Examples</h4>
<a href='a//'>Hidden (since not whole "word")</a>
<a href='//'>Shown (as exact)</a>
<a href='//a'>Hidden (since not whole "word")</a>

关于css - CSS选择器无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42536448/

10-11 12:43
查看更多