1

私はスタイリッシュなユーザー スタイル シートを書いており、何かが可能かどうかを確認しようとしています。次のような構造のページをカスタマイズしています。

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

基本的に、私は最初の投稿要素を可視化しています。これは、私がやりたいことのほとんどを実行します。追加したいのは、クラスのコンテンツが. 1 でない場合は、最初の要素を表示したくありません。page1post

CSS は、このように機能する条件、またはブール AND を提供していないようです。しかし、私はまだCSSに慣れていないので、何かが欠けているかもしれません. 代わりに Greasemonkey スクリプトを使用する必要がある場合は、それを行いますが、これを実現できる CSS トリックがあることを期待していました。

4

2 に答える 2

1

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-21T19:16:57.910 に答える