CSS Selector没有按预期工作

Question

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

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

Answer 1

试试这个：

<main>
  <div id="myClippetWrapper">

    <div id="clippetNav">

    </div>

    <div id="codeAndNotesWrapper">

      <div id="codeView">

      </div>

      <div id="noteView">

        <div id="codeNotesEditor">

        </div>

      </div>

    </div>

  </div>
</main>

选择href包含'//'

的所有对象

working fiddle

Answer 2

您正在使用的选择器中有一个微妙的不同：

• [attribute~="value"] - 检查特定单词（即包裹在空格或精确字符串中）
• [attribute*="value"] - 检查是否包含一组给定的文本。

你会发现第二种方法有效，而第一种方法却没有。

此外，您还要确保拥有自己定位的特定元素，并确保将值包含在引号内，如下所示：

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

示例

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;