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>

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>

Get more info on substring attribute selectors

Answer 2

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

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

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

Answer 3

您有两种不同的substring selectors选项，您应根据网址的性质选择它们。

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

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

但是，如果您完全不确定网址的一致性并且只知道中间的某个部分，请使用*=，它将匹配包含的元素至少给出的一组字符的实例。

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

Answer 4

是的，那里有一个CSS selector。

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

如何根据部分HREF隐藏元素？

4 个答案: