Làm cách nào để áp dụng CSS cho chữ cái đầu tiên sau: trước nội dung?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style type="text/css"> 
p:before { 
    content:"Former - "; 
    color:red; 
    font-family:"Tahoma" ,Times New Roman; 
    font-size:70%; 
} 

p.normal:first-letter { 
    font-size:40px; 
    color:blue; 
} 
</style> 
</head> 
<body> 
    <p class="normal">First character of this paragraph will 
    be normal and will have font size 40px;</p> 
</body> 
</html>

Ở đây, nội dung trong phần tử giả :before hiển thị màu đỏ, nhưng tôi cũng muốn tạo kiểu cho ký tự "F" của "F tính chất đầu tiên của đoạn này" màu lam. Nhưng thay vào đó, tôi thấy chữ "F" của "F ormer -" màu lam.Làm cách nào để áp dụng CSS cho chữ cái đầu tiên sau: trước nội dung?

Điều tôi muốn áp dụng cả hai :before và chữ cái đầu tiên của .normalsau nội dung :before cho cùng một đoạn. Điều này có thể không? Nếu vậy, làm thế nào?

Nguồn

2012-07-29 swati16

gì một phần của câu hỏi của bạn dẫn bạn đến mong đợi * bất kỳ cuốn sách *, hoặc trang web, tên như một câu trả lời? Và 'F' nào? Một trong 'Cựu' hoặc một trong' Đầu tiên'? –

* hiển thị "Đầu tiên" của "F" *? Điều đó nghĩa là gì? Bạn không có nghĩa là "F" của "đầu tiên"? –

bản sao có thể có của [bộ chọn css: chữ cái đầu tiên của đoạn đầu tiên trong một div] (http://stackoverflow.com/questions/5721730/css-selector-first-paragraphs-first-letter-inside-a-div) –

Thông thường bạn sẽ làm điều này với giả yếu tố :first-letter, nhưng nhìn thấy là bạn có :before nội dung, mà inserts text before the actual content of your paragraph, sau đó chứ không phải là chữ cái đầu tiên của nội dung thực tế, :first-letter sẽ phù hợp với chữ cái đầu tiên của nội dung :before để thay thế.

đó có nghĩa là thay vì điều này:

<p class="normal"> 
    <p:before>Former - </p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will 
    be normal and will have font size 40px; 
</p>

Bạn thực sự có được điều này:

<p class="normal"> 
    <p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>ormer - 
    </p:before> 
    First character of this paragraph will 
    be normal and will have font size 40px; 
</p>

Do cách CSS tạo công trình nội dung, tôi không nghĩ rằng có một giải pháp trong CSS tinh khiết để đạt được chữ cái đầu tiên của nội dung thực tế khi bạn đã chèn nội dung trước đó.

Là một thay thế, bạn có thể sử dụng một span ở vị trí của pseudo-yếu tố :first-letter, mà bạn có thể áp dụng các màu xanh, nhưng điều đó có nghĩa là bạn phải chèn các yếu tố bổ sung:

<p class="normal"><span>F</span>irst character of this paragraph will 
    be normal and will have font size 40px;</p>

p.normal span { 
    font-size:40px; 
    color:blue; 
}

Nguồn

2012-07-29 15:27:54 BoltClock

-1

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <title>Complicated pseudo element and span</title> 

    <style type="text/css"> 
     <!-- 
     p:before { 
      content:"Read this -"; 
      color:red; 
      font-family:"Tahoma" ,Times New Roman; 
      font-size:100%;} 

      .span { 
        font-size:40px; 
       color:blue; 
       } 

     --> 
    </style> 

    </head> 
    <body> 

    <p><span style="color:blue; font-size:30px" >F</span>irst character of this paragraph 
     will be normal and will have font size 40px;</p> 

    </body> 
</html>

Cám ơn châm-I đã OUTPUT của tôi cách tôi tưởng tượng và tôi muốn nó

Nguồn

2012-07-29 18:46:41 swati16

Làm cách nào để áp dụng CSS cho chữ cái đầu tiên sau: trước nội dung?

Trả lời

Các vấn đề liên quan