17/04/2020 - Xem: 1361
-
::first-line | Chỉnh css cho dòng chữ đầu tiên
Khi bạn muốn chỉnh giao diện cho dòng chữ đầu tiên cho đoạn văn bản bạn có thể sử dụng thuộc tính này.VD:p:first-line {
color: lightcoral;
}
-
::first-letter | Chỉnh css cho chữ đầu tiên
Tất nhiên có dòng đầu thì sẽ có ký tự đầu tiên của chữ, bạn muốn thay đổi css cho ký tự đầu thì sử dụng thuộc tính này.VD:p::first-letter {
font-size: 200%;
color: #8A2BE2;
} -
::selection | Chỉnh css cho 1 đoạn văn bản được chọn
Được sử dụng cho trường hợp bạn muốn thay đổi 1 đoạn văn bản do người sử dụng chọn.VD: bạn muốn khi người dùng chọn 1 đoạn văn bản thì văn bản có background màu vàng chẳng hạn thì có thể sử dụng như saudiv::selection {
background: yellow;
} -
:root | Chỉnh css cho thành phần gốc
Đại loại nó sẽ chỉnh css cho thành phần báo ngoài cùng của tài liệu, nếu là trang HTML thì nó là thành phần HTML ngoài cùng, nếu là RSS nó là thành phần RSS ngoài cùng.
Sở dĩ có cách này là chúng ta không quan tâm đến văn bản được thể hiện bởi dạng HTML hay RSS hay bất cứ dạng cấu trúc nào, nó sẽ áp dụng cho thành phần ngoài cùng của tài liệuVD: bạn muốn cả văn bản có nền màu vàng thì bạn chèn đoạn css sau vào:root {
background: yellow;
} -
:empty | Chỉnh css cho thành phần rỗng
Trong khi cắt HTML/CSS bạn muốn các thành phần không có giá trị cũng có thể áp dụng css riêng so với các thành phần có dữ liệu thì đây là công cụ cực hiệu quả.VD: bạn muốn thẻ div nào không có dữ liệu thì có thể biến mất khoảng chống trong giao diện chẳng hạndiv:empty {
display: none;
} -
:only-child | Chỉnh css cho thành phần con duy nhất
Chỉnh css cho thành phần con là duy nhấtVD:div p:only-child {
color: red;
}
Thẻ div nào chỉ có 1 thẻ p bên trong nó thì nội dung trong thẻ p sẽ màu đỏ -
:first-of-type | Chỉnh css cho thành phần loại thẻ đầu tiên
Chỉnh css cho loại thẻ đầu tiên trong một vùng có nhiều loại thẻ khách nhau.VD: trong thẻ div có thẻ p1 --> span --> p2 --> labeldiv:first-of-type {VD: trong thẻ div có thẻ p1 --> p2 --> span --> label
color: red;
}
Nội dung cho thẻ p1 sẽ có màu đỏ.div:first-of-type {
color: red;
}
Nội dung cho thẻ p1, p2 sẽ có màu đỏ (vì đều là loại thẻ p) -
:last-of-type | Chỉnh css cho thành phần loại thẻ cuối
Cũng như trên nhưng nó áp dụng ngược lại cho loại thẻ ở cuốiVD: trong thẻ div có thẻ p1 --> span --> p2 --> labeldiv:last-of-type {
color: red;
}
Nội dung cho thẻ label sẽ có màu đỏ. -
:nth-of-type(n) | Chỉnh css cho thành phần loại thứ n
Chỉnh css cho thành phần loại ở vị trí thứ n giống với thuộc tính :nth-child(n)VD:trong thẻ div có thẻ p1 --> span --> p2 --> labeldiv p:nth-of-type(2) {
color: red;
}
Nội dung p2 sẽ có màu đỏ -
:nth-last-of-type() | Chỉnh css cho thành phần thẻ loại cuối cùng
Điều chỉnh css cho thành phần cuối cùng của loại thẻ này trong cùng 1 vùngVD:trong thẻ div có thẻ p1 --> span --> p2 --> labeldiv p:nth-last-of-type() {
color: red;
}
Nội dung trong thẻ p2 sẽ có màu đỏ -
:not(thành phần) | Chỉnh css cho các thẻ không phải thành phần này
Ta có thể chỉnh css cho các thẻ ngoài trừ thành phần đc khai báoVD:trong thẻ div có thẻ p1 --> span --> p2 --> labeldiv:not(p) {
color: red; }
Nội dung trong thẻ span và label sẽ có màu đỏ
Các tin khác cùng chuyên mục
- Funny web2.0
- Giải thử vài câu đề thi tốt nghiệp ptth môn toán
- MỘT NGÀY PHẢI KHÁC MỌI NGÀY
- Level 1 - Lập trình hướng đối tượng (P2)
- Level 1 - Lập trình hướng đối tượng (P1)
- PHP 5.3, Phần 3: Không gian tên
- PHP 5.3, Phần 2: Bao đóng và các hàm lambda
- PHP 5.3, Phần 1: Các thay đổi về giao diện đối tượng
- Tăng tốc độ xử lý CSDL MySQL
- Giới thiệu JSON