Các Selector Lồng Nhau
Tại mỗi vùng của trang web,
cùng một thẻ nhưng cũng có thể cần các cách thể hiện khácnhau.
...
Ví dụ: Cùng 1 thẻA để tạo liên kết nhưng cách thể hiện thẻA trong phần Banner có thể phải khác với cách thể hiện A trong phần menu trái, phải và khác với nội dung
....
...
Để làm được như vậy chúng ta cần sử dụng đến một khái niệm mà tôi tạm gọi là các selector lồng nhau. Cú pháp của cái này cũng rất đơn giản như sau:
selectorX selectorY
{
property1: value1;
property2: value2;
...
}
...
Đoạn mã trên quy định cách thể hiện của selectorY khi nó được đặt trong selectorX.
Nói loằng ngoằng X, Y mãi có vẻ khó hiểu. Bây giờ tôi lấy ví dụ như sau:
VD1: Giả sử tôi có 2 vùng trên trang web được xác định bằng 2 thẻ DIV. Trong 2 vùng này tôi có các thẻ H1. Tôi muốn các thẻ H1 ở
vùng 1 có màu xanh còn các thẻ H1 ở vùng 2 có màu đỏ tôi có thể làm như sau: <html>
<head><title>Demo CSS</title>
</head>
<style>
.loai1 h1{color:blue;}
.loai2 h1{color:red;}
</style>
<body>
<div class="loai1">
<h1>Tieu de nay co mau xanh </h1>
</div>
<div class="loai2">
<h1>Tieu de nay co mau do</h1> </div>
</body>
</html>
...
VD2: Với các liên kết: Tương tự như ví dụ 1 nhưng với các liên kết. Tôi muốn các liên kết trong vùng 1 thể hiện màu xanh,hover màu đỏ, các liên kết trong vùng 2 thì có cỡ chữ lớn hơn: thể hiện màu xanh green, hover màu đỏ.
<html>
<head>
<title> Demo selector long nhau </title>
</head>
<style>
.loai1 a:link, .loai1 a:visited
{color:blue;}
.loai1 a:hover {color:red;} .loai2 a:link, .loai2 a:visited
{color:green; font-size:xx-large;
.loai2 a:hover {color:yellow;}
</style>
<body>
<div class="loai1">
<a href="#"> Lien ket nay trong vung loai1 </a>
</div>
<div class="loai2">
<a href="#">Lien ket nay trong vung loai2</a>
</div>
</body>
</html>
...
Các ví dụ trên mới trình bày các selector lồng nhau 2 cấp tuy nhiên CSS chấp nhận các bạn có thể lồng nhiều cấp hơn nhiều lần như thế. Túm lại, lồng các Selector là một
kỹ thuật rất hữu ích khi làm web.
Facebook
Twitter