Question

我正在使用Firefox上的Stylish扩展程序对网站进行一些调整，如果他们的链接中包含单词“Demo”，我希望不会显示该类。

我试过了：.gallery-item > a[href*="demo"], .gallery-item > a[href*="Demo"], .gallery-item > a[href*="DEMO"] { display: none !important; }

但我根本没有那么做。

Answer 1

您应该使用（see this fiddle）：

.gallery-item a[href*=demo]{
    display:none;
}

Answer 2

更新了答案，现在看到了example site。

简短版

使用当前HTML无法使用CSS。如果您可以将类添加到父 .gallery-item元素，则可以使用CSS完成。

长版

CSS规则

.gallery-item > a[href*='DEMO'] {
    display:none;
}

不适用于从网站提取的以下HTML：

  <div class="column gallery-item " id="product-3779102">
      <a href="/p/BoSH-Mesh-Texture-Changer-DEMO/3779102" class="product-image"><img alt=".:*BoSH*:. Mesh Texture Changer DEMO" src="https://d3qcduphvv2yxi.cloudfront.net/assets/5972439/view_small/T%20changer%20DEMO.jpg?1343233084"></a>
      <a href="/p/BoSH-Mesh-Texture-Changer-DEMO/3779102" class="product-title">.:*BoSH*:. Mesh Texture Changer DEMO</a>

      <div class="item-price">
          <span class="price">L$0</span>
     </div>

     <div class="item-description">
     </div>
</div>

因为更高 CSS specificity的规则会覆盖display属性。即

    .product-listing.gallery .gallery-item a.product-image {
        display: block;
    }

添加!important应该会有效，但更好的选择是为演示链接提供一个特定的类，这样可以更轻松地将它们定位到或选择器为了你的规则，你的规则更具特异性。例如，id给规则带来了更多的权重：

#main-content a[href*=DEMO] {
    display:none;
}

主要问题是，即使您使用上面的CSS隐藏<a>，您真正想要做的是隐藏整个项。 CSS无法实现这一点，因为它目前没有parent选择器。你真的想隐藏一个锚的父级，它在href的某处有一个不区分大小写的“demo”。

在jQuery中（包含在您的页面中）可以通过以下方式完成：

$('.gallery-item').filter(function() {
    if ($(this).find('a[href]').text().toLowerCase().indexOf('demo') !== -1) {
        $(this).hide();
    }
});

但是，即使您设法隐藏项目，图库也会预先渲染为行和列，因此删除一个或多个只留下空格，而项目应该真正重排以占用隐藏某些项目的空间。

我建议考虑使用“demo”为项目添加一个类，以便CSS可用于隐藏项目，但您还需要重新设计布局，以便其余项目在页面上重排（如果你在意这件事！）

希望这有帮助。

原始回答

来自documentation

选择器中属性名称和值的区分大小写取决于文档语言。

属性选择器不正确。您需要在CSS选择器中使用DEMO来匹配HTML中的DEMO。请参阅following example，其中只有第一个链接符合CSS规则。

<强> CSS

.gallery-item > a[href*='DEMO'] { color: red }

<强> HTML

<div id="product-4106908" class="column gallery-item ">
    <a class="product-image" href="/p/Mesh-DEMO/4106908">foo</a>
</div>
<div id="product-2" class="column gallery-item ">
    <a class="product-image" href="/p/Mesh-demo/2">foo</a>
</div>

使用Firefox / Chrome for CSS的条件样式表？

2 个答案: