用于 CSS 的 Firefox/Chrome 的条件样式表？答案

【问题标题】：Conditional Stylesheets with Firefox/Chrome for CSS?用于 CSS 的 Firefox/Chrome 的条件样式表？
【发布时间】：2013-12-05 19:38:53
【问题描述】：

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

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

但我并没有走得太远。

【问题讨论】：

您想隐藏“Demo”还是“demo”子字符串？来自documentationThe case-sensitivity of attribute names and values in selectors depends on the document language。请参阅demo of case sensitivity 选择器。
等一下，你是指类中的'demo'这个词，href还是锚文本？
问题编辑引入了一个重要的变化。选择器现在正在寻找带有[href*='demo'] 的元素，这些元素是<a> 标记的后代。你的意思是.gallery-item > a[href*='demo'] 吗？
删除空格会改变 CSS 规则的 combinator 部分。主要问题是因为 属性选择器 仍然损坏。您需要在 CSS 选择器中使用 DEMO 来匹配标记。
哇，好吧。 Here 是我尝试应用我的风格的官方链接。如果您有 Firebug 或类似的东西，请选择其中一个框或其中包含单词 demo 的链接。

标签： css firefox conditional stylesheet

【解决方案1】：

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

短版

当前的 HTML 不能用 CSS 来完成。如果您可以向 parent .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 应该可以工作，但更好的选择是为 demo 链接提供一个特定的类，这样可以更轻松地定位它们或一个选择器到您的规则以使您的规则具有更大的特异性。例如，id 赋予规则更多的权重：

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

主要的问题是即使你直接使用上面的CSS来隐藏<a>，你真正想要做的就是隐藏整个item。这在 CSS 中是不可能的，因为它目前没有 parent 选择器。您真的想隐藏在 href 某处具有不区分大小写的“演示”的锚的父级。

在 jQuery（包含在您的页面中）中，可以这样做：

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

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

我建议考虑使用“演示”为项目添加一个类，以便可以使用 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>

【讨论】：

感谢您的支持，不胜感激。

【解决方案2】：

你应该使用 (see this fiddle)：

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

【讨论】：