Hướng dẫn css selector la gì
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Show 1- CSS Selector là gì?CSS Selector được sử dụng để tìm kiếm (Hoặc lựa chọn) các phần tử trong tài liệu HTML để áp dụng kiểu dáng (style) cho chúng. Ví dụ đơn giản:
CSS Selectors có thể được chia làm 3 loại sau: Basic Selectors Các Selector cơ bản giúp bạn lựa chọn các phần tử dựa trên Name, ID, Class hoặc Attribute của nó. Các Selector cơ bản sẽ được đề cập trong bài viết này. Combining selectors Lựa chọn các phần tử dựa trên mối quan hệ giữa chúng.
Pseudo selectors
2- Universal selectorUniversal selector (Bộ lựa chọn phổ quát): Lựa chọn tất cả các phần tử hoặc tất cả các phần tử của một namespace (không gian tên). Cú pháp:
Ví dụ lựa chọn tất cả các phần tử và thiết lập viền mầu xanh cho nó. universal-selector-example1.html
3- CSS Type SelectorCSS Type Selector giúp bạn tìm kiếm các phần tử theo tên. Ví dụ, lựa chọn tất cả các phần tử Ví dụ, lựa chọn tất cả các phần tử : type-selector-example1.css type-selector-example1.html I am P element Nếu các CSS Selector có cùng một quy tắc bạn có thể viết chúng một cách ngắn gọn, các CSS Selector sẽ ngăn cách nhau bởi dấu phẩy và sử dụng chung một quy tắc. type-selector-example2.css type-selector-example2.html CSS Class Selector lựa chọn các phần tử dựa trên giá trị của thuộc tính (attribute) class. Ví dụ, lựa chọn tất cả các phần tử với class = "txt-green" hoặc bao gồm từ "txt-green". class-selector-example1.css class-selector-example1.html I am P element Ví dụ: class-selector-example2.css with class 'txt-green' or includes 'text-green' */
p.txt-green {
color: green;
}
.bg-yellow {
background-color: yellow;
}
/* class-selector-example2.html
I am P element with class='txt-green' CSS ID Selector giúp bạn lựa chọn phần tử dựa trên giá trị của thuộc tính (attribute) ID, giá trị của thuộc tính ID phải khớp hoàn toàn với giá trị cho bởi Selector. Chú ý: CSS ID Selector "không phân biệt chữ hoa chữ thường" (Case insensitive) id-selector-example.css id-selector-example.html I am P element CSS Attribute Selector giúp bạn lựa chọn các phần tử dựa trên thuộc tính hoặc giá trị của thuộc tính đã cho. |