CSS3構造擬似クラスをスタッキング

Question

CSS3の擬似クラスセレクタが便利になる可能性のあるさまざまなシナリオを練習し、私は何かを渡って走っている間、私はちょうど把握することはできません！

ここでの状況です。私は、テキストのブロックのための最初の非空の段落の:first-of-type::first-letterを変更したいです。私は擬似クラスはしかし積み重ねることができることをわかりません。ここで私が作ってみたものです（もちろん、動作しません）

.article-body > p:not(:empty):first-of-type::first-letter { ... }

次のマークアップを考えるます：

<div class="article-body">
    <p></p>
    <p>The "T" in this paragraph should be the one affected.</p>
</div>

（;ていない（）と：第一の型IE）互いの上に積み重ねることができない

私が思い付くことができる唯一の推測は、擬似クラスです。あなたが互いの上に擬似要素を積み重ねることができるので、どの奇数であり、他の擬似クラス...

これを達成することができる方法のための任意のアイデア？

Answer 1

名前が示すように、

:first-of-typeはない最初の非空pお勧めしますように、最初のpを選択します。

これらはうまくスタックが、:first-of-type純粋タグの（すなわちタイプ）ではなく、前の複雑なセレクタで動作します。だから、あなただけの最初pを探して終わる、その最初の段落は、空であってはなりません。そして、それは存在しません。

私はそれだけで1つのセレクタでこれを行うことは可能だと思うしていない

空の段落では、テキスト全体で表示されることがありますと仮定すると、あなたは最初、非空の段落が影響を受けることにしたいです。これは私が思い付くことができる最高です。

p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }

p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }

これは最初の非空の段落にCSSを適用します（まあ、最初の空の段落に、それはとにかく、その後何もしません）。

Answer 2

空の段落の原因を取り除きます

.article-body > p:first-of-type::first-letter { ... }

適切に動作します。空の段落があることが必要何らかの理由はありますか？あなたは空の1がされていないため、アカウントへの最初の段落の間隔を変えることはできますか？