如何基于部分 HREF 隐藏元素？

Question

我正在尝试根据 href 属性（使用 CSS）隐藏页面上的一些特定广告。我浏览了一些回答，其中提到了基于其 href 值隐藏元素的方法。但是，在这里元素相当动态，并且每次加载页面时都会发生变化。是否有办法根据其部分 href 值隐藏元素/锚点？

以下是我想要隐藏的 HTML 代码。

代码：

<div id="union-ad" class="union-banner">
<a href="http://someURL?Dynamic_Id's">
</div>

这是我迄今为止尝试过的。

   <style type="text/css">
   a[href='someURL']{ display: none }
   </style>

- Appu Mistri

---

有没有可能给这些你想要消失的<a>标签添加一些类？ - Maciej Wojcik

Answer 1

使用子字符串选择器：

a[href^="http://someURL"] {
  display: none;
}

<a href="http://otherURL.com?hey">You CAN see me.</a>
<a href="http://someURL.com?hey">You can't see me!</a>

• 获取有关子字符串属性选择器的更多信息

- Wes Foster

Answer 2

您可以使用*。这将在元素的href属性中查找部分字符串someURL。

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

演示：

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

<div id="union-ad" class="union-banner">
    <a href="http://someURL?Dynamic_Id's"> my Link </a>
    <a href="http://some?Dynamic_Id's"> other Link </a>
</div>

JSFiddle

- CMedina

---

这个问题似乎在询问URL的第一部分始终是已知的，因此使用 *= 是有风险的，因为它也可能仅仅通过纯粹的机会匹配任意随机的URL - 只要可能，我更喜欢使用 ^=。 - TheThirdMan

@TheThirdMan 这个问题是关于部分字符串 href 的。 - CMedina

Answer 3

你有两种不同的子字符串选择器选择，根据URL的性质进行选择。

如果您的URL始终以相同的一组字符开头，包括协议规范，则 ^= 是最佳选择-它只会匹配href属性以给定字符集开头的元素。这几乎消除了随机隐藏其他链接的可能性，因为它们随机包含您的选择器。

a[href^='http://someURL'] {
  display: none;
}

然而，如果您对URL的一致性完全不确定，只知道中间的某个部分，请使用*=，它将匹配包含给定字符集至少一个实例的元素。

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

- TheThirdMan

Answer 4

是的，有一个CSS选择器可以做到这一点。

a[href~=someURL] { display: none }

- patrickcipot

---

这将仅匹配包含由空格字符包围的单词“someURL”的属性，因此对于URL来说可能不是非常有用。 - TheThirdMan