내 CSS `:first-letter` 선택기가 범위 요소에서 작동하지 않는 이유는 무엇입니까?

CSS :first-letter Not Functioning

컨텍스트

Microsoft Word의 HTML 출력을 사용하여 생성된 제목 섹션의 첫 글자 스타일을 지정하려는 시도에서 :first-letter 선택기를 사용하지 못했습니다. HTML에는 다양한 인라인 스타일을 가진 범위 요소가 포함되어 있습니다.

해결책

:first-letter는 MDN 문서에 정의된 대로 블록 수준 요소에서만 작동하기 때문에 문제가 발생합니다. 이 경우, 범위 요소는 인라인 요소입니다.

문제를 해결하려면 두 가지 옵션이 있습니다:

1. 둘러싸는 단락 요소에 :first-letter를 적용합니다.

p::first-letter {
    font-size: 500px;
}

2. 인라인 블록으로 표시할 스팬 요소를 설정하고 적용합니다. :first-letter.

p b span::first-letter {
    font-size: 500px !important;
}
span {
    display: inline-block;
}

참고

• :first-letter는 같은 줄에 있는 이미지나 인라인 테이블과 같이 콘텐츠 앞에 오는 요소에 영향을 주지 않습니다. .
• :before before :first-letter를 사용하면 첫 번째 요소 대신 :before 요소에 스타일이 적용됩니다. 편지.

위 내용은 내 CSS `:first-letter` 선택기가 범위 요소에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!