堆疊CSS3結構僞類

在練習CSS3僞類和選擇器可能派上用場的不同場景時，我遇到了一些我無法想象的東西！堆疊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>

唯一想我能想出的是，僞類（即;：not（）和：first-of-type）不能相互疊加。這很奇怪，因爲你可以在彼此上堆疊僞元素，以及其他僞類...

任何有關如何實現這一點的想法？

來源

2009-12-01 Dustin Hansen

:first-of-type顧名思義，選擇第一個p，而不是第一個非空的p，因爲您可能想要。

它們堆疊得很好，但:first-of-type純粹在標籤（即類型）上操作，而不是在前面的複雜選擇器上操作。所以你最終只會尋找第一個p，那第一段也不應該是空的。這並不存在。

假設空白段落可能出現在整個文本中，並且只希望第一個非空段落受到影響，但我認爲只用一個選擇器就可以做到這一點。這是我能拿出最好的：

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僅適用於第一個非空段落（很好，第一空段落，但它不會做任何事情，那麼無論如何）。

來源

2009-12-01 22:07:51 mercator

這也是我得出的結論。任何想法如何完成同樣的事情，而不使用：第一類型或第一個孩子等？ – 2009-12-01 22:10:20

嗯，我認爲你可能在文本的任何地方有任何數量的空段落？或者它只是一個空的起始段，可能或不可能在那裏？ – mercator 2009-12-01 22:32:33

我更新了我的答案。 – mercator 2009-12-01 23:04:49

取下空的段落導致

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

檢點。是否有任何理由讓空白段落需要在那裏？你能否改變第一段的空格來解釋空白的那一段不在那裏？

來源

2009-12-01 22:33:49

我主要關心的是一些HTML WYSIWYG編輯器，它們在清除未使用的空p標籤後不會自行清理。當然，它們可以通過程序清理，但無法保證 - 無論如何 - 這將完成。 – 2009-12-02 23:04:28

堆疊CSS3結構僞類

回答

相關問題