对于多个复杂选择器，CSS的操作方式类似于布尔AND

Question

我正在编写一个Stylish用户样式表，并试图看看是否有可能。我正在定制一个结构如下的页面：

<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"one_answers"someOtherLayers"表示div内部的几个级别的div。为了简洁起见，我没有在这里完全复制页面的结构。

我在我的用户CSS中有这个：

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

本质上，我使第一个post元素可见，这完成了我想做的大部分事情。我想添加的是，只有当page类的内容是1时，我才想使该元素可见。如果不是1，那么我不想显示第一个post元素。

CSS似乎不提供以这种方式工作的条件语句或布尔AND。但我对CSS还是个新手，所以我可能会错过一些东西。如果我必须使用Greasemonkey脚本，我会这么做，但我希望有一些CSS技巧可以让我实现这一点。

Answer 1

Stylish无法做到这一点，因为Stylish只注入CSS，而CSS没有文本内容的选择器。

要做你想做的事情，你必须安装Greasemonkey（Firefox）或Tampermonkey（Chrome），然后用户脚本可以设置可见性。

假设div只包含1，那么像这个完整的GM/TM脚本这样的东西就可以随心所欲了。它使用了jQuery选择器的强大功能
您还可以在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");
    }
} );

---

考虑到jQueryjavascript必须使用的逻辑，我们可以看到CSS不尝试为此提供选择器的部分原因。这超出了CSS的任务范围，但这正是javascript的初衷。

---

还要注意，这是针对静态页面的。如果页面的内容使用AJAX，那么逻辑就会变得更加复杂。

Answer 2

CSS无法访问HTML内容。

为了解决这个问题，你还需要添加一个类，这样CSS就可以"看到"它：

HTML:

<div class="main one">
    <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>

CSS：

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