2.2 Cú pháp CSS
2.2.2Các phần tử lựa chọn lớp giả động
Cho phép bổ sung phần tử lựa chọn giả thông minh đối với bất kì thẻ nào hơn là các liên kết. Bảng dưới đây sẽ chỉ ra 3 phần tử lớp giả lập động và chức năng của chúng
Phần tử chọn Mục đích
Phần tử chọn Mục đích
:active Áp dụng kiểu khi một phân tử được nhấp chuột
:focus Áp dụng kiểu khi một phần tử có focus bàn phím (khi con trỏ được đặt trong hộp text box của form)
Các phần tử lựa chọn con
Các phần tử ngữ cảnh cho phép tạo mẫu phần tử con tách biệt với phần tử cha. Phần tử này áp dụng khi cần lồng ghép các phần tử. Ví dụ, chúng ta có nhiều phần tử em trong phần tử division, div và paragraph trong division này có thể có các phần tử strong.
Ví dụ: nếu viết phần lựa ngữ cảnh sau: div strong
tất cả các phần tử strong trong div – thậm trí trong các phần tử paragraph (cháu)-sẽ bị ảnh hưởng bởi tính thừa kế
Các phần tử con chỉ cho phép lựa chọn con. Điều này có nghĩa là, chúng ta có thể được đảm bảo rằng chỉ có các phần tử em bên trong div,chứ không phải trong các cấu trúc khác lồng bên trong div sẽ bị ảnh hưởng. Để làm được điều này, chúng ta bắt đầu bằng việc sử dụng phần tử, ở bên phải dấu > và phần tử con trong vấn đề:
div>em
Chúng ta có thể nhận thấy sự phúc tạp. Nếu chúng ta muốn lựa chon phần tử em trong phần tử paragraph bên trong phần tử div, thì viết như sau:
div>p>em
Tất cả phần tử con trong phần tử paragraph, không được nằm bên ngoài, sẽ đuwocj định dạng trong quí tắc kế tiếp theo
Các phần tử con First
Một phần tử con first cho phép …. Kiểu phần tử lựa chọn này chỉ áp dụng đốiv ứoi con đầu tiên của phần tử định sẵn. Để áp dụng kiểu này đến con đầu tiển, cung cấp phần tử cha cộng với cú pháp phần tử lựa chọn con đầu tiên
p:first-child
Bất kì qui tắc nào chúng ta viết cho phần từ lựa chọn này sẽ được áp dụng đến phần tử con đầu tiển của tất cả paragraph
Phần tử lụa chọn kề cận
Phần tử này trợ giúp định dạng các phần từ cùng một cha. Các phần tử cùng một cha là các phần tử nằm trong cùng một mức của cây tà liệu và chia sẽ một cha chung. Ví dụ
to be the quintessential escapist experience. A good mystery and a <a href="http://www.adagioteas.com/">cup of tea</a> on a rainy day is true relaxation.</p>
Phần tử lựa chọn thuộc tính
Kiểu phần tử lựa chọn thuốc cho phép lựa chọn các phần tự dựa vò thuộc tính mà các phần tử có. Ví dụ, nếu chúng ta có một liên kết trong URL, có thể tạo bởi phần tử này thay vì phần tử anchor của chính no. Mội thực thể của URL được định dạng theo qui tắc kết hợp với phần tử lựa chọn thuộc tính
Có bốn kiểu dáng có sẵn cho phần tử như miểu tả ở bảng dưới đây
Các mức điều khiển có thể dành được bởi kiểu phần tử lựa chọn này ít gây ngạc nhiên. Table 2.3: Attribute Matching
Cú pháp Mục đích
[att] Áp dụng kiểu đốiv ứoi thuộc tính đưa ra, không quan tâm tới giá trị
[att=val] Áp dụng kểu đối với thuộc tính đưa xa trong giá trị xác định
[att~=val] Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu cách
[att|=val] Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu |
(adsbygoogle = window.adsbygoogle || []).push({});