Định nghĩa và sử dụng
Cấu trúc:nth-last-child(n) { property: value; } Ví dụHTML viết:<html> <head></head> <body> <div> <p>Thành phần thứ nhất</p> <p>Thành phần thứ 2</p> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <div>Thành phần thứ 2</div> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <ul> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> </ul> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <p>Thành phần độc lập thứ nhất</p> <p>Thành phần độc lập thứ 2</p> <p>Thành phần độc lập thứ 3</p> <p>Thành phần độc lập thứ 4</p> <p>Thành phần độc lập thứ 5</p> <p>Thành phần độc lập thứ 6</p> </body> </html> Hiển thị trình duyệt khi chưa có CSS:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6 CSS viết:p:nth-last-child(3){ color: blue; } Hiển thị trình duyệt khi đã có css:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6 Ta thấy những thành phần <p> ở vị trí thứ 3 tính từ thành phần cuối có thành phần cha đều đã được chọn. Trình duyệt hỗ trợ":nth-last-child(n)" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.
Định nghĩa và sử dụng
Cấu trúc:last-child { property: value; } Ví dụHTML viết:<html> <head></head> <body> <div> <p>Thành phần thứ nhất</p> <p>Thành phần thứ 2</p> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <div>Thành phần thứ 2</div> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <ul> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> </ul> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <p>Thành phần độc lập thứ nhất</p> <p>Thành phần độc lập thứ 2</p> <p>Thành phần độc lập thứ 3</p> <p>Thành phần độc lập thứ 4</p> <p>Thành phần độc lập thứ 5</p> <p>Thành phần độc lập thứ 6</p> </body> </html> Hiển thị trình duyệt khi chưa có CSS:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6 CSS viết:p:last-child{ color: blue; } Hiển thị trình duyệt khi đã có css:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6 Ta thấy những thành phần <p> ở vị trí cuối cùng có thành phần cha đều đã được chọn. Trình duyệt hỗ trợ":last-child" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống. |