: li 요소의 첫 글자

Question

탐색 메뉴에서 : first-letter 의사 요소를 사용하려고합니다.

HTML과 같은 :

<nav> 
    <ul> 
     <li>Navigation</li> 
     <li>Navigation</li> 
     <li>Navigation</li> 
     <li>Navigation</li> 
    </ul> 
</nav> 

그리고 CSS와 같은 :

nav li:first-letter {font-size: 150%;} 

나는 또한 어떤 도움을

nav ul li:first-letter {font-size: 150%;} 

을 시도했습니다.

나는이에 조정하면 나는 <ul> 태그의 첫 번째 요소에 대한 작업을 볼 수 있습니다 여전히

nav ul:first-letter {font-size: 150%;} 

하지만 정확히 내가 원하는 것을 얻을 수 없다; <li>의 인라인은 첫 번째 문자가 다른 문자보다 큽니다.

Answer 1

당신의 li 요소가 모두 (이 표시 아니에요 display: inline 스타일을 가지고 가정) 인라인 흐르는되기 때문에 :first-letter 의사 요소는 인라인 텍스트의 전체 덩어리 밖으로 매우 첫 글자를 선택합니다. 따라서 ul:first-letter이 작동하지만 li:first-letter은 작동하지 않습니다.

대신 목록 항목을 인라인 블록으로 만들어보십시오. 따라서 상자 자체는 인라인으로 이동하면서 자신의 상자에 텍스트가 계속 포함됩니다. 필요한 경우 여백과 패딩을 제로로하십시오. 브라우저에서 생성 된 "그림자"마크 업 단지 다른 요소를 삽입으로

jsFiddle demo

Answer 2

는 것 같다.

뭔가 같은 :

<p><p:first-letter>H</p:first-letter>ello</p> 

당신은 인라인 블록 및/또는 블록 요소와 :first-letter 선택을 시도 했습니까?

display:block을 추가하면 정상적으로 작동합니다.

Answer 3

첫 번째 CSS 스 니펫이 정상적으로 작동합니다 (this fiddle 참조). 그것을 덮어 쓰는 다른 CSS 규칙이 있어야합니다.