css seçici:

Question

<div> 
<p> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

Nasıl bu div içindeki ilk paragrafın ilk harfi (benim css) seçebileceğiniz bir div içindeki ilk paragrafın ilk harfi ??

Teşekkür

Luca

Answer 1

div p:first-of-type:first-letter { font-weight: bold; } 

Answer 2

Bir blok seviyesinden elemanın ilk harfine stil uygulamak için CSS :first-letter sözde elemanla kullanabilirsiniz.

Answer 3

Evet, aslında gerçekten basit:

div p:first-letter 

Answer 4

CSS: İlk harfli Seçici

div p:first-letter{ 
color:blue; 
} 

Working example HERE

Not: Aşağıdaki özellikler ile kullanılabilir: ilk harf

yazı özellikleri, renk özellikleri, arka plan özellikleri, marjı özellikleri, dolgu özellikleri, sınır özellikleri, text-decoration, vertical-align (şamandıra 'none' yalnızca), , text-transform line-height, şamandıra, net

Answer 5

Eh, ben ilk harfli stil uygulanacak istediğiniz elemana en az bir sınıf eklemek istiyorum. Eminim ilk div'in ilk paragrafı için bir css kuralı yapabilirsin; ama eğer başlangıçta bir paragrafla başka bir div varsa, o zaman hepsine uygulanacaktır. Başka bir deyişle, seçicinizde bir sınıf/kimlik kullanmadan, EVERY DIV'un ilk paragrafının ilk harfine uygulanacaktır (bu sizin aradığınız davranış olmayabilir). Bu yüzden bu öneriyoruz: En css

<div> 
<p class="FirstLetter"> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

Ve sonra:

.FirstLetter:first-letter { 
    // styling rules here 
} 

Ama sezgi yanlışsa ve bu daha sonra, aradığınız şeyi olduğundan emin biliyorsanız @Demian Brecht'in cevabı iyi olmalı.

<div>  
<h1>My Great Title</h1> 
<p> 
In my younger years I was a great man, but all that changed when I saw... 
</p> 
<p> 
I struck him for shaming my name, my family, my life. It was a shameful... 
</p> 
</div> 

Yani bu durumda, p:first-child Chrome veya en azından değil, nedense çalışmaz: Bir başlık veya Örneğin <p> önce bazı diğer elemanları türlerine sahip olabilir Bazı durumlarda

Answer 6

Safari.

Yani onun yerine böyle kullanmak isteyeceksiniz:

div p:first-of-type:first-letter{ 
/* add your awesome code here */ 
} 

Zaman ayırdığınız için teşekkür ederiz.

first-of-type

Answer 7

doğrudan tüm div ilk harfini hedefleyebilir:

div:first-letter { 
    color: red; 
} 

demo: Bunun https://codepen.io/anon/pen/gRoypa