我正在开发一个依赖用户输入来创建脚本的网站 作为纵深防御解决方案,我添加了黑名单保护以忽略与外部来源的所有链接。我尝试了以下代码片段,但它不起作用(我的浏览器支持它,因为 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 选择器无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42536448/