تكديس 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>

تخمين الوحيد الذي يمكنني التوصل إليه هو أن الفصول الزائفة (أي؛: لا () و: أولا من النوع) لا يمكن تكديسها على بعضها البعض. وهو أمر غريب لأنه يمكنك تكديس عناصر زائفة على بعضها البعض، وغيرها من الطبقات الزائفة ...

أي أفكار لكيفية تحقيق ذلك؟

Answer 1

: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 فقط إلى الفقرة الأولى غير الفارغة (حسنا، وإلى فقرة فارغة الأولى، لكنها لن تفعل أي شيء ثم على أي حال).

Answer 2

إزالة أسباب الفقرة الفارغة

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

أن تتصرف بشكل صحيح. هل هناك أي سبب يجب أن تكون الفقرة الفارغة هناك؟ هل يمكنك تغيير تباعد الفقرة الأولى لحساب الشخص الفارغ الذي لا يجري هناك؟