像 bool 值 AND 一样用于多个复杂选择器的 CSS？

Question

我正在编写一个时尚的用户样式表，并且正在尝试查看是否有可能。我正在自定义具有如下结构的页面:

<div class="main">
    <div class="someExtraLayers">
        <div class="page">
            1
        </div>
    </div>
    <div class="someOtherLayers">
        <div class="post">
            blah blah
        </div>
        <div class="post">
            foo foo
        </div>
        <div class="post">
            bar bar
        </div>
    </div>
</div>

其中 'someExtraLayers' 和 'someOtherLayers' 表示 div 内部的几层 div。为了简洁起见，我没有在此处完全复制页面的结构。

我的用户 CSS 中有这个:

div.post:nth-child(1) {
    display:block !important;
}

基本上，我使第一个 post 元素可见，这完成了我想做的大部分工作。我想添加的是，如果 page 类的 content 为 1，我只想使该元素可见。如果它不是 1，那么我不想显示第一个 post 元素。

CSS 似乎不提供以这种方式工作的条件或 bool AND。但我对 CSS 还是个新手，所以我可能遗漏了一些东西。如果我必须改用 Greasemonkey 脚本，我会这样做，但我希望有一些 CSS 技巧可以让我完成此任务。

Answer 1

Stylish 不能这样做，因为 Stylish 只是注入(inject) CSS 和 CSS does not have a selector for text content。

要执行您想要的操作，您必须安装 Greasemonkey (Firefox) 或 Tampermonkey (Chrome)，然后用户脚本可以设置该可见性。

假设 div 包含 only 1，那么像这个完整的 GM/TM 脚本这样的东西将做你想做的。它使用了 jQuery selectors 的强大功能。
你也可以 see a live demo of the code at jsFiddle 。 :

// ==UserScript==
// @name     _Show the first post on page 1
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var pageHasOne  = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
    var jThis   = $(this);  //-- this is a special var inside an .each()
    var pageDiv = jThis.find ("div.page:contains(1)");
    if ($.trim (pageDiv.text() )  == "1") {
        //--- Show the first post div. !important is not needed here.
        jThis.find ("div.post:first").css ("display", "block");
    }
} );

---

鉴于 jQuery javascript 必须使用的逻辑，我们可以看到 CSS 不尝试为此提供选择器的部分原因。它超出了 CSS 的任务范围，但正是 javascript 的用途。

---

另请注意，这是针对静态 页面的。如果页面对其内容使用 AJAX，则逻辑会变得更加复杂。