CSS Pseudo-classes Combine : first-child와 : first-letter

Question

나는 CSS Pseudo-Classes를보고 있었고 몇 가지 가능한 클래스를 가지고 놀 수 있었고 될 수 없다는 것을 알았습니다. 끝난.

내 질문은 :

내가 사용하려는 : 나타나는 단락의 첫 번째 인스턴스를 대상으로 첫 아이 선택기를

예 : 나는 또한 수행 할 작업을

p:first-child { 
    color:#333; 
    font-weight:800; 
} 

첫 번째 단락의 첫 글자를 선택하고 첫 글자의 글자 크기를 늘리는 것입니다.

각 단락의 첫 글자를 선택하려면 전자 다음 CSS :

이

p:first-letter { 
font-size:1.6em; 
} 

그러나 위의 코드와 나는 텍스트의 모든 페이지 블록의 첫 글자를 목표로하고 나는 단지 첫 번째 단락의 첫 글자를 대상으로 지정할가

나는 다음 코드를 시도 필요한 요소를 타겟팅 할 수는 있지만 작동하지 않습니다.

p:first-child :first-letter { 
font-size:1.6em; 
} 

누구나 위에서 설명한 요구 사항을 어떻게 충족시킬 수 있는지 알고 있습니까?

Answer 1

는 수행

p:first-child:first-letter { 
    font-size:1.6em; 
} 

당신은 두 사업자 사이의 공간을 필요 없어요.

이 경우 첫 번째 하위 요소 인 p 개가 모두 선택됩니다. 당신은 단지에 관계없이 중첩 페이지의 모든 p 요소를 통해이 작업을 수행하려면, 당신은 공간을 제거 더 특이에게

Answer 2

를 추가해야합니다, 그것은 필요하지 않습니다 : 공간으로

p:first-child:first-letter { 
font-size:1.6em; 
} 

, 당신은 p:first-child 그 자체보다는 p:first-child의 자손의 첫 글자를 스타일링하고자합니다.

:first-child은 pseudo-class이고, :first-letter은 pseudo-element입니다. 유사 요소는 셀렉터를 결합 할 때 약간 다른 규칙을 가지고 있습니다. 셀렉터를 염두에 두어야합니다 (즉, 셀렉터 당 하나의 의사 요소 만 가질 수 있으며 마지막으로 와야합니다. 따라서 p:first-letter:first-child과 같은 것은 아닙니다. 유효하다).

Answer 3

의사 클래스와 가상 요소 사이의 공간을 제거하는 단지 오타 (공백없이 첫 문자 또는이다 : 첫 아이 :

p:first-child:first-letter { 
    font-size:1.6em; 
} 

jsFiddle example