CSS: chữ cái đầu tiên không hoạt động

Question 1

Tôi đang cố gắng áp dụng kiểu CSS cho một số đoạn mã HTML được tạo từ tài liệu Microsoft Word. HTML mà Word tạo ra khá tệ và bao gồm rất nhiều kiểu nội tuyến. Nó đi một cái gì đó như thế này:

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

... và rất đơn giản, tôi xin định kiểu chữ cái đầu tiên của phần tiêu đề. Nó chỉ cần lớn hơn và ở một phông chữ khác. Để làm điều này, tôi đang cố gắng sử dụng :first-letterbộ chọn, với một cái gì đó như:

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

Nhưng nó dường như không hoạt động. Đây là một trò chơi chứng minh điều này:

http://jsfiddle.net/KvGr2/

Bất kỳ ý tưởng nào là sai / làm thế nào để có được chữ cái đầu tiên của phần tiêu đề đúng kiểu? Tôi có thể thực hiện các thay đổi nhỏ đối với đánh dấu (như thêm một div bao bọc xung quanh mọi thứ), mặc dù không phải là không gặp một số khó khăn.

Question 2

::first-letterkhông hoạt động trên các phần tử nội tuyến như a span. ::first-letterhoạt động trên các phần tử khối như một đoạn văn, chú thích bảng, ô bảng, mục danh sách hoặc những phần tử có thuộc tính của chúng displayđược đặt thành inline-block.

Do đó, tốt hơn hết bạn nên đăng ký ::first-lettera pthay vì a span.

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

hoặc nếu bạn muốn một ::first-letterbộ chọn trong một spanthì hãy viết nó như sau:

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

MDN cung cấp cơ sở lý luận cho hành vi không rõ ràng này:

Phần ::first-lettertử giả CSS chọn chữ cái đầu tiên của dòng đầu tiên của khối, nếu nó không đứng trước bất kỳ nội dung nào khác (chẳng hạn như hình ảnh hoặc bảng nội tuyến) trên dòng của nó.

...

Một dòng đầu tiên chỉ có nghĩa là trong một hộp khối container, do đó ::first-letterphần tử giả chỉ có ảnh hưởng đến các yếu tố với một displaygiá trị block, inline-block, table-cell, list-itemhoặc table-caption. Trong tất cả các trường hợp khác, ::first-letterkhông có hiệu lực.

Một trường hợp lẻ (ngoài không làm việc vào các mặt hàng inline) là nếu bạn sử dụng :beforecác :first-lettersẽ áp dụng cho trước không phải là chữ cái đầu tiên thực tế xem codepen

Ví dụ

Người giới thiệu

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Question 3

Bạn có thể có được hành vi dự kiến bằng cách đặt thuộc tính hiển thị của span thành khối nội tuyến:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>

Mở rộng đoạn mã

Question 4

Điều này là do :first-letterchỉ hoạt động trên các phần tử khối / khối nội tuyến. SPANlà một phần tử nội tuyến.

Lấy từ http://reference.sitepoint.com/css/pseudoelement-firstletter :

Phần tử giả: chữ cái đầu tiên chủ yếu được sử dụng để tạo các hiệu ứng kiểu chữ phổ biến như mũ thả. Phần tử giả này đại diện cho ký tự đầu tiên của dòng văn bản được định dạng đầu tiên trong phần tử cấp khối, khối nội dòng, chú thích bảng, ô bảng hoặc mục danh sách.