내 CSS :첫 글자 선택기가 Microsoft Word의 HTML에서 작동하지 않는 이유는 무엇입니까?

CSS :first-Letter Selector가 작동하지 않음

Microsoft Word 문서에서 추출된 HTML 코드를 처리할 때 스타일 문제가 발생할 수 있습니다. 이 경우 Word에서 생성된 HTML에 :first-letter 선택기를 적용해도 원하는 효과를 얻을 수 없다는 것을 알 수 있습니다.

문제는 :first-letter 선택기가 오직 호환 가능하다는 사실에 있습니다. 블록 요소로. 제공된 HTML에서 제목의 첫 글자는 인라인

해결책 1: 블록 요소에 :first-letter 적용

간단한 해결책은 :first-letter 선택기를 대신 제목 텍스트를 포함하는 요소.

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

해결책 2: 블록 수준 범위 사용

원본 마크업을 수정할 수 없는 경우 대체 접근 방식은 다음과 같습니다. 표시 속성을 첫 번째 문자를 포함하는 요소:

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

설명

:first-letter 선택기는 블록 수준 요소의 첫 번째 문자에만 영향을 미치며, 이는 새 문자에서 시작하는 컨테이너 요소입니다. 선. 블록 수준 요소의 예로는 단락, 제목, 표 셀 등이 있습니다. 과 같은 인라인 요소는 이 의사 요소를 사용하여 선택할 수 없습니다.

요소를 블록 수준으로 설정하면 효과적으로 블록 요소처럼 동작하도록 강제하여 :first-letter 선택기가 올바르게 적용될 수 있습니다.

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