Bộ chọn CSS cơ bản là gì?
Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn là một phần của bộ quy tắc CSS. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v. Show
Có một số loại bộ chọn khác nhau trong CSS
1) Bộ chọn phần tử CSSBộ chọn phần tử chọn phần tử HTML theo tên Kiểm tra nó ngay bây giờđầu ra Phong cách này sẽ được áp dụng trên mỗi đoạn văn Tôi cũng thế Và tôi 2) Bộ chọn Id CSSBộ chọn id chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn là duy nhất trong trang, do đó, nó được chọn để chọn một phần tử duy nhất, duy nhất Nó được viết bằng ký tự băm (#), theo sau là id của phần tử Hãy lấy một ví dụ với id "para1" Kiểm tra nó ngay bây giờđầu ra Xin chào Javatpoint. com Đoạn này sẽ không bị ảnh hưởng 3) Bộ chọn lớp CSSBộ chọn lớp chọn các thành phần HTML với một thuộc tính lớp cụ thể. Nó được sử dụng với một ký tự dấu chấm. (ký hiệu dừng hoàn toàn) theo sau là tên lớp Ghi chú. Tên lớp không được bắt đầu bằng sốHãy lấy một ví dụ với một lớp "trung tâm" Kiểm tra nó ngay bây giờđầu ra Tiêu đề này có màu xanh dương và được căn giữaĐoạn này có màu xanh dương và được căn giữa Bộ chọn lớp CSS cho phần tử cụ thểNếu bạn muốn chỉ định rằng chỉ một phần tử HTML cụ thể sẽ bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp Hãy xem một ví dụ Kiểm tra nó ngay bây giờđầu ra Tiêu đề này không bị ảnh hưởngĐoạn này có màu xanh dương và được căn giữa 4) Bộ chọn chung CSSBộ chọn chung được sử dụng làm ký tự đại diện. Nó chọn tất cả các yếu tố trên các trang Kiểm tra nó ngay bây giờđầu ra Đây là tiêu đềPhong cách này sẽ được áp dụng trên mỗi đoạn văn Tôi cũng thế Và tôi 5) Bộ chọn nhóm CSSBộ chọn nhóm được sử dụng để chọn tất cả các phần tử có cùng định nghĩa kiểu Bộ chọn nhóm được sử dụng để giảm thiểu mã. Dấu phẩy được sử dụng để phân tách từng bộ chọn trong nhóm Hãy xem mã CSS không có bộ chọn nhóm Như bạn có thể thấy, bạn cần xác định các thuộc tính CSS cho tất cả các thành phần. Nó có thể được nhóm theo những cách sau Bộ chọn CSS chọn (các) phần tử HTML cho mục đích tạo kiểu. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v. Có nhiều loại bộ chọn cơ bản khác nhau
Mã HTML. Xem xét mã mẫu để hiểu bộ chọn và cách sử dụng chúng theo cách tốt hơn HTML#div-container{ color: blue; background-color: gray; }0 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }2 #div-container{ color: blue; background-color: gray; }3 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }5 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }8 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }02 #div-container{ color: blue; background-color: gray; }03 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }05 #div-container{ color: blue; background-color: gray; }06 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }08 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }8 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }04 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }1____208 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }01 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00____208 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }1____308 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }11 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }13 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }19 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }11 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }13 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }08 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }44 #div-container{ color: blue; background-color: gray; }45 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }47 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }02 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }19 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }11 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }13 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }44 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }1____308 #div-container{ color: blue; background-color: gray; }04 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }06 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }02 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }19 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }11 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }13 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }15 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }17 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }08 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }30 #div-container{ color: blue; background-color: gray; }30 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }06 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }36 #div-container{ color: blue; background-color: gray; }37 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }30 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }06 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }36 #div-container{ color: blue; background-color: gray; }46 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }30 #div-container{ color: blue; background-color: gray; }1 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }06 #div-container{ color: blue; background-color: gray; }4 #div-container{ color: blue; background-color: gray; }36 #div-container{ color: blue; background-color: gray; }55 #div-container{ color: blue; background-color: gray; }33 #div-container{ color: blue; background-color: gray; }6 #div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }04 #div-container{ color: blue; background-color: gray; }6
#div-container{ color: blue; background-color: gray; }00 #div-container{ color: blue; background-color: gray; }2____06 Chúng tôi sẽ áp dụng các quy tắc CSS cho mã HTML ở trên 1. bộ chọn phần tử. Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử (hoặc thẻ) ví dụ: p, h1, div, span, v.v. Phong cách. css. Đoạn mã sau được sử dụng trong mã HTML ở trên bằng cách sử dụng bộ chọn Phần tử giả. Quy tắc CSS này sẽ được áp dụng cho thẻ p trên trang 5 bộ chọn CSS là gì?Có một số loại bộ chọn khác nhau trong CSS. . Bộ chọn phần tử CSS Bộ chọn Id CSS Bộ chọn lớp CSS Bộ chọn chung CSS Bộ chọn nhóm CSS Có bao nhiêu bộ chọn cơ bản trong CSS?Mặc dù có nhiều loại Bộ chọn CSS khác nhau, bài học hôm nay tập trung vào bốn bộ chọn cần thiết; .
Ba bộ chọn CSS là gì?Ba bộ chọn CSS phổ biến nhất là Bộ chọn id, Bộ chọn lớp và Bộ chọn phần tử .
Bộ chọn CSS là gì và giải thích bằng các ví dụ?A type selector selects all HTML elements that have a given node name. For example, “a” would select all elements and apply the CSS property values to them. “Input” would select all elements, “span” all elements and so on. |