Trong CSS, bạn có thể chọn phần tử, Class và Id để áp dụng kiểu dáng và tùy chỉnh các phần tử trên trang web. Dưới đây là hướng dẫn chi tiết về cách sử dụng chúng:
Chọn phần tử
Để chọn tất cả các thể hiện của một phần tử HTML cụ thể, sử dụng tên phần tử làm bộ chọn. Ví dụ: p chọn tất cả các thẻ <p> trong tài liệu.
Chọn Class
Để chọn các phần tử có cùng lớp, sử dụng dấu chấm "." theo sau là tên lớp. Ví dụ: .my-class chọn tất cả các phần tử có lớp là "my-class".
Để chọn các phần tử có nhiều lớp, sử dụng dấu chấm "." và liệt kê tên các lớp cách nhau bằng dấu cách. Ví dụ: .class1.class2 chọn các phần tử có cả hai lớp "class1" và "class2".
Chọn Id
Để chọn một phần tử cụ thể bằng Id, sử dụng dấu "#" theo sau là tên Id của phần tử. Ví dụ: #my-id chọn phần tử có Id là "my-id".
Kết hợp chọn phần tử, lớp và Id:
Bạn có thể kết hợp cả chọn phần tử, lớp và Id để chọn các phần tử cụ thể có lớp và Id nhất định. Ví dụ: div.my-class#my-id chọn phần tử <div> có lớp là "my-class" và Id là "my-id".
Dưới đây là ví dụ cụ thể về cách chọn phần tử, Class và Id trong CSS
/* Chọn tất cả các thẻ <p> */
p {
color: blue;
}
/* Chọn tất cả các phần tử có lớp là "my-class" */
.my-class {
background-color: yellow;
}
/* Chọn phần tử có Id là "my-id" */
#my-id {
font-weight: bold;
}
/* Kết hợp chọn phần tử, lớp và Id */
div.my-class#my-id {
border: 1px solid black;
}
Bằng cách sử dụng chọn phần tử, Class và Id, bạn có thể dễ dàng lựa chọn và áp dụng kiểu dáng cho các phần tử cụ thể hoặc nhóm các phần tử có đặc điểm chung trên trang web của bạn.