Văn bản css chữ hoa đầu tiên

Chữ cái đầu tiên của một phần tử không phải lúc nào cũng đơn giản để xác định

• Dấu chấm câu đứng trước hoặc ngay sau chữ cái đầu tiên được bao gồm trong kết quả trùng khớp. Dấu chấm câu bao gồm bất kỳ ký tự Unicode nào được xác định trong các lớp mở (Ps), đóng (Pe), trích dẫn đầu tiên (Pi), trích dẫn cuối cùng (Pf) và các lớp chấm câu (Po) khác
• Một số ngôn ngữ có các chữ ghép luôn được viết hoa cùng nhau, chẳng hạn như IJ trong tiếng Hà Lan. Trong những trường hợp này, cả hai chữ cái của bản tóm tắt phải khớp với phần tử giả ::first-letter
• Sự kết hợp của phần tử giả ::before và thuộc tính content có thể đưa một số văn bản vào đầu phần tử. Trong trường hợp đó, ::first-letter sẽ khớp với chữ cái đầu tiên của nội dung được tạo này

Ghi chú. CSS đã giới thiệu ký hiệu ::first-letter (với hai dấu hai chấm) để phân biệt các lớp giả với các phần tử giả. Để tương thích ngược, các trình duyệt cũng chấp nhận

<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

Hỗ trợ trình duyệt cho chữ ghép như IJ bằng tiếng Hà Lan kém. Kiểm tra bảng tương thích bên dưới để xem trạng thái hỗ trợ hiện tại

Chỉ có thể sử dụng một tập hợp con nhỏ các thuộc tính CSS với phần tử giả ::first-letter

• Tất cả các thuộc tính phông chữ. _________5, _______0_______6, _______0_______7, _______0_______8, _______0_______9, _______6_______0, _______1, __6_______2, _______6_______3, _______6_______4, _______6_______5, __6_______6, _______6_______7, _______8, _______ 9, _______ 16_______0, _______16_______1, _______ 16_______2 và _______ 3
• Tất cả các thuộc tính nền.

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  4,

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  5,

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  6,

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  7,

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  8,

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  9,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  0,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  1,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  2 và

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  3
• Tất cả các thuộc tính ký quỹ.

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  4,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  5,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  6,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  7,

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  8
• Tất cả các thuộc tính đệm.

  p::first-letter {
    color: red;
    font-size: 150%;
  }
  

  9, ::first-letter0, ::first-letter1, ::first-letter2, ::first-letter3
• Tất cả các thuộc tính đường viền. các chữ viết tắt ::first-letter4, ::first-letter5, ::first-letter6, ::first-letter7, ::first-letter8, ::first-letter9, và các thuộc tính của chữ viết tắt
• Tài sản IJ0
• Các thuộc tính CSS IJ1, IJ2, IJ3, IJ4, IJ5 (khi thích hợp),

  <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat.
  </p>
  <p>-The beginning of a special punctuation mark.</p>
  <p>_The beginning of a special punctuation mark.</p>
  <p>"The beginning of a special punctuation mark.</p>
  <p>'The beginning of a special punctuation mark.</p>
  <p>*The beginning of a special punctuation mark.</p>
  <p>#The beginning of a special punctuation mark.</p>
  <p>「特殊的汉字标点符号开头。</p>
  <p>《特殊的汉字标点符号开头。</p>
  <p>"特殊的汉字标点符号开头。</p>
  

  2, IJ7, IJ8, IJ9, ::first-letter0, ::first-letter1, ::first-letter2 (chỉ khi ::first-letter1 là ::first-letter4)

::first-letter

Trong ví dụ này, chúng tôi sẽ sử dụng phần tử giả ::first-letter để tạo hiệu ứng chữ hoa đầu dòng đơn giản trên chữ cái đầu tiên của đoạn văn ngay sau ::first-letter6