Giả dụ tôi có 3 thẻ p như thế này:
Sở dĩ "Sở thích: Chơi thể thao, lướt web" có màu xanh là bởi vì nó cũng là con cả, cụ thể, nó là con cả của thẻ div.
<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>
Giờ nếu tôi viết trong CSS như thế này:
p:first-child {color:blue}
Thì dòng chữ đầu tiên Họ và tên: Nguyễn Đức Anh sẽ có màu xanh.
Có một chú ý nhỏ, đó là câu lệnh p:first-child {color:blue} sẽ tác động đến tất cả thẻ p mà là con cả, chẳng hạn nếu chúng ta có mã đánh dấu như sau:
<!DOCTYPE html>
<html>
<head>
<title>Blog Mạng Lưới Toàn Cầu</title>
<style>
p:first-child
{
p:first-child {color:blue}}
</style>
</head>
<body>
<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>
<div>
<p>Sở thích: Chơi thể thao, lướt web</p>
<p>Nhân vật ưa thích: Osho</p>
</div>
</body>
</html>
Theo bạn những đoạn văn bản nào sẽ có màu xanh? Câu trả lời là có 2 đoạn. Đoạn thứ nhất là Họ và tên: Nguyễn Đức Anh thì bạn đã hiểu. Đoạn thứ hai cũng có màu xanh, đó là Sở thích: Chơi thể thao, lướt web
Chốt hạ: lớp giả first-child tác động đến tất cả các con cả của các thẻ khác nhau.
Trình duyệt hỗ trợ
Tất cả các trình duyệt phổ thông đều hỗ trợ first-child, bao gồm: Chrome, FireFox, Opera, Safari, IE
Một số ví dụ khác
CSS:p:first-child b
{
background:yellow;
}
{
background:yellow;
}
Mã đánh dấu:
<p>Tôi là <b>Nguyễn Đức Anh</b>. Tôi quản trị trang web <b>Blog Mạng Lưới Toàn Cầu</b>.</p>
<p>Tôi sinh năm <b>1987<./b>. Quê ở <b>Hà Tây</b>.</p>
Kết quả: Làm cho tất cả các nội dung bôi đậm trong thẻ p đầu tiên có nền màu vàng.
Tôi là Nguyễn Đức Anh. Tôi quản trị trang web Blog Mạng Lưới Toàn Cầu.
Tôi sinh năm 1987. Quê ở Hà Tây.
No comments:
Post a Comment