對於多個複雜選擇器，其操作方式與布爾AND類似？

我正在寫一個時尚的用戶樣式表，並試圖查看是否有可能。我定製頁面有這樣的結構：對於多個複雜選擇器，其操作方式與布爾AND類似？

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

從本質上講，我正在看到的第一篇文章元素，這樣做的大部分是我想做的事情。我想添加的是我只想讓該元素在page類的內容爲1時可見。如果不是1，那麼我不想顯示第一個元素post。

CSS似乎不提供條件或布爾AND，這樣工作。但是我對CSS仍然很陌生，所以我可能會錯過一些東西。如果我不得不使用Greasemonkey腳本，我會這麼做，但我希望有一些CSS技巧可以讓我完成這個任務。

來源

2013-11-21 Keen

使用JS/jQuery，CSS無法操作你的DOM –

你可能想要檢查頁面的'body'元素，它提供了關於它包含什麼內容的提示。如果有一個可以定位的獨特類（比如'.content-page-1'），則可以使用CSS。否則，JavaScript是唯一的方法。 –

時尚不能做這個因爲時尚只注入CSS和CSS does not have a selector for text content。

要做你想做的事，你必須安裝Greasemonkey（Firefox）或Tampermonkey（Chrome），然後用戶腳本可以設置該可見性。

假設div包含只有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作爲其內容，則邏輯會變得更復雜一些。

來源

2013-11-22 01:55:10

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

來源

2013-11-21 19:16:57 bookcasey

我不擁有/控制該網站，因此我無法修改其內容。 – Keen

對於多個複雜選擇器，其操作方式與布爾AND類似？

回答

相關問題