CSS 选择器没有按预期工作

Question

我正在开发一个依赖用户输入来创建脚本的网站作为纵深防御解决方案，我添加了黑名单保护以忽略与外部来源的所有链接。我尝试了以下代码片段，但它不起作用（我的浏览器支持它，因为 w3schools 示例适用于它）：

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

Answer 1

试试这个：

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

Select href 包含 '//' 的所有 a 对象

working fiddle

Answer 2

您使用的选择器略有不同：

[attribute~="value"] - 这会检查一个特定的词（即包裹在 white-space 或确切的字符串中）
[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='whosebug.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 Selector doesn't work as expected

css

security

xss