Trong hướng dẫn này, bạn sẽ học cách sử dụng selecter CSS để áp dụng các quy tắc kiểu dáng cho các thành phần.
Selecter là gì?
Selecter CSS là một mẫu để đối sánh các thành phần trên trang web. Các quy tắc kiểu được liên kết với Selecter đó sẽ được áp dụng cho các phần tử khớp với mẫu Selecter.
Selecter là một trong những khía cạnh quan trọng nhất của CSS vì chúng cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web của mình theo nhiều cách khác nhau để chúng có thể được tạo kiểu.
Một số loại Selecter có sẵn trong CSS, hãy xem xét kỹ hơn về chúng:
Selecter chung
Selecter chung, được biểu thị bằng dấu hoa thị (*), khớp với mọi thành phần trên trang.
Selecter chung có thể được bỏ qua nếu các điều kiện khác tồn tại trên phần tử. Selecter này thường được sử dụng để loại bỏ các lề và phần đệm mặc định khỏi các phần tử nhằm mục đích kiểm tra nhanh.
Hãy thử ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:
Ví dụ
* {
margin: 0;
padding: 0;
} Các quy tắc kiểu bên trong Selecter * sẽ được áp dụng cho mọi thành phần trong tài liệu.
Lưu ý: Bạn không nên sử dụng Selecter chung (*) quá thường xuyên trong môi trường sản xuất, vì Selecter này khớp với mọi thành phần trên trang web gây quá nhiều áp lực không cần thiết lên trình duyệt. Thay vào đó, hãy sử dụng theo phần tử.
Selecter loại phần tử
Selecter loại phần tử khớp với tất cả phiên bản của phần tử trong tài liệu với tên loại phần tử tương ứng. Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào:
Ví dụ
p {
color: blue;
} Các quy tắc kiểu bên trong Selecter p sẽ được áp dụng cho mọi <p> (hoặc đoạn văn) trong tài liệu và tô màu xanh cho nó, bất kể vị trí của chúng trong tài liệu.
Selecter id
Selecter id được sử dụng để xác định quy tắc kiểu cho một phần tử duy nhất hoặc duy nhất .
Selecter id được xác định bằng dấu thăng (#) ngay sau giá trị id.
Ví dụ
#error {
color: red;
} Quy tắc kiểu này hiển thị văn bản của một phần tử có màu đỏ, có thuộc tính id là error.
Lưu ý: Giá trị của thuộc tính id phải là duy nhất trong một tài liệu nhất định — nghĩa là không có hai phần tử nào trong tài liệu HTML của bạn có thể chia sẻ cùng một giá trị id.
Selecter class
Selecter lớp có thể được sử dụng để chọn bất kỳ phần tử HTML nào có thuộc tính class. Tất cả các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định.
Selecter lớp được xác định bằng dấu chấm (.) ngay sau giá trị class.
Ví dụ
.blue {
color: blue;
} Các quy tắc kiểu ở trên làm cho văn bản có màu xanh lam của mọi thành phần trong tài liệu có class là blue. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ:
Ví dụ
p.blue {
color: blue;
} Quy tắc kiểu bên trong Selecter p.blue chỉ hiển thị văn bản có màu xanh lam đối với những <p> có thuộc tính class là blue và không có tác dụng đối với các đoạn khác.
Descendant Selectors
Bạn có thể sử dụng các Selecter này khi cần chọn một phần tử là phần tử con của một phần tử khác, ví dụ: nếu bạn chỉ muốn nhắm mục tiêu các phần tử neo có trong danh sách không có thứ tự, thay vì nhắm mục tiêu tất cả các phần tử neo. Hãy xem nó hoạt động như thế nào:
Ví dụ
ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
} Các quy tắc kiểu bên trong Selecter ul.menu li a chỉ áp dụng cho những <a> chứa bên trong một <ul> có class là .menu và không ảnh hưởng đến các liên kết khác bên trong tài liệu.
Tương tự, các quy tắc kiểu bên trong selecter h1 em sẽ chỉ được áp dụng cho những <em> chứa bên trong <h1> và không ảnh hưởng đến các phần tử <em> khác.
Child Selectors
Selecter child được sử dụng để chỉ chọn những phần tử là phần tử con trực tiếp của phần tử nào đó.
Selecter con được tạo thành từ hai hoặc nhiều Selecter được phân tách bằng ký hiệu lớn hơn (>). Ví dụ: bạn có thể sử dụng Selecter này để chọn cấp độ đầu tiên của các thành phần danh sách bên trong danh sách lồng nhau có nhiều cấp độ. Hãy xem một ví dụ để hiểu cách thức hoạt động của nó:
Ví dụ
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
} Quy tắc kiểu bên trong Selecter ul > li chỉ áp dụng cho những <li> là con trực tiếp của <ul> và không ảnh hưởng đến các phần tử danh sách khác.
Adjacent Sibling Selectors (Liền kề)
Selecter liền kề có thể được sử dụng để chọn các phần tử anh chị em (tức là các phần tử ở cùng cấp độ). Selecter này có cú pháp như sau: E1 + E2, trong đó E2 là đích của Selecter.
Selecter h1 + p trong ví dụ sau sẽ chỉ chọn <p> nếu cả hai <h1> và <p> có chung cha trong tài liệu và <h1> ngay trước <p>. Điều đó có nghĩa là chỉ những đoạn xuất hiện ngay sau mỗi <h1> có các quy tắc kiểu liên quan. Hãy xem cách Selecter này thực sự hoạt động:
Ví dụ
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}General Sibling Selectors (Chung)
Selecter anh chị em chung tương tự như Selecter anh chị em liền kề (E1 + E2), nhưng ít nghiêm ngặt hơn. Selecter anh chị em chung được tạo thành từ hai Selecter đơn giản được phân tách bằng ký tự ∼. Nó có thể được viết như sau: E1 ∼ E2, trong đó E2 là mục tiêu của Selecter.
Selecter h1 ∼ p trong ví dụ dưới đây sẽ chọn tất cả các <p> đứng trước <h1>, trong đó tất cả các phần tử chia sẻ cùng một phần tử cha trong HTML.
Ví dụ
h1 ∼ p {
color: blue;
font-size: 18px;
}
ul.task ∼ p {
color: #f0f;
text-indent: 30px;
}Có nhiều Selecter phức tạp hơn như Selecter thuộc tính , lớp giả , phần tử giả . Chúng ta sẽ thảo luận chi tiết về các Selecter này trong các chương sắp tới.
Selecter nhóm
Thông thường, một số Selecter trong biểu định kiểu chia sẻ các khai báo quy tắc kiểu giống nhau. Bạn có thể nhóm chúng thành một danh sách được phân tách bằng dấu phẩy để giảm thiểu mã trong biểu định kiểu của bạn. Nó cũng ngăn bạn lặp đi lặp lại các quy tắc kiểu giống nhau. Hãy cùng xem:
Ví dụ
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
} Như bạn có thể thấy trong ví dụ trên, cùng một quy tắc kiểu font-weight: normal; được chia sẻ bởi các Selecter h1 và h2, h3 vì vậy nó có thể được nhóm trong một danh sách được phân tách bằng dấu phẩy, như sau:
Ví dụ
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
