Đoạn bỏ qua phong cách vì một đoạn lồng nhau

Question

Có lẽ kiến ​​thức CSS của tôi là có hạn, nhưng tôi không uderstand này:

<p style="color: green"> 
    <p style="color: red">This is red</p> 
    This should be green. But it's not. 
</p> 

Dòng thứ hai sẽ làm cho màu đen bỏ qua "color: green". Tại sao? Tôi đã thử nghiệm trong Chrome 28 và Firefox 22.

Answer 1

Bạn không thể lồng đoạn.

Đoạn là phần tử đóng tự động, </p> là tùy chọn - bất kỳ thành phần khối nào sẽ tự động đóng mở lần cuối <p>.

Đây là những gì đang xảy ra:

<p style="color: green"> 
</p> <!-- auto-closed paragraph --> 

<p style="color: red"> 
    This is red 
</p> 

This should be green. But it's not. 

</p> <!-- here you have syntax error --> 

Answer 2

Bạn không thể tổ <p> 's. Thẻ kết thúc của một đoạn có thể bị bỏ qua nếu nó được theo sau với một đoạn văn khác. Điều này có nghĩa là trong mã của bạn, đoạn đầu tiên không chứa văn bản, đoạn thứ hai chứa "Đây là màu đỏ". Sau đó, có một số văn bản "Điều này nên được màu xanh lá cây. Nhưng nó không phải." không có kiểu và thẻ đóng </p>, không có thẻ mở.

kiểm tra: http://www.w3.org/TR/html-markup/p.html

Answer 3

khoản không thể được lồng vào nhau trong vòng một yếu tố đoạn hoặc chặn.

Khi mã của bạn được trả lại trong trình duyệt nó được trả lại như như dưới đây

<p style="color: green"></p> 
    <p style="color: red"> 
     This is red 
    </p> 
    This should be green. But it's not. 
    <p></p> 

Vì vậy, bạn có thể thấy, không có wrapper để câu cuối cùng kết quả là mặc định css màu tức là màu đen đang được áp dụng trong vấn đề này.