Ý Nghĩa Của Các CSS Selector: * div, p * div p * div ~ p * div + p * div p

Question

Ý Nghĩa Của Các CSS Selector: * div, p * div p * div ~ p * div + p * div > p

Kiệt Nguyễn · Accepted Answer

1. Selector * div Ý Nghĩa: Chọn tất cả các phần tử

nằm ở bất kỳ đâu trong tài liệu, bất kể chúng là con của phần tử nào. Ví dụ:* div { background-color: lightblue; } Trong ví dụ trên, tất cả các phần tử

sẽ có màu nền là lightblue. 2. Selector p Ý Nghĩa: Chọn tất cả các phần tử

trong tài liệu. Ví dụ:p { font-size: 16px; } Trong trường hợp này, tất cả các đoạn văn

sẽ có kích thước font là 16px. 3. Selector * div p Ý Nghĩa: Chọn tất cả các phần tử

nằm bên trong bất kỳ phần tử

nào, bất kể chúng là con hoặc cháu của

. Ví dụ:* div p { color: green; } Trong ví dụ này, tất cả các đoạn văn

bên trong bất kỳ phần tử

nào sẽ có màu chữ là green. 4. Selector * div ~ p Ý Nghĩa: Chọn tất cả các phần tử

đứng sau bất kỳ phần tử

nào và nằm cùng cấp với

. Đây là selector “tiền anh” (general sibling combinator). Ví dụ:* div ~ p { margin-top: 10px; } Trong ví dụ này, tất cả các đoạn văn

đứng sau phần tử

trong cùng một cấp sẽ có khoảng cách phía trên là 10px. 5. Selector * div + p Ý Nghĩa: Chọn phần tử

ngay sau ngay sau một phần tử

nào đó. Đây là selector “em” (adjacent sibling combinator). Ví dụ:* div + p { font-weight: bold; } Trong ví dụ này, phần tử

ngay sau phần tử

sẽ có chữ đậm. 6. Selector * div > p Ý Nghĩa: Chọn tất cả các phần tử

là con trực tiếp của bất kỳ phần tử

nào. Đây là selector “con” (child combinator). Ví dụ:* div > p { font-style: italic; } Trong trường hợp này, tất cả các đoạn văn

là con trực tiếp của phần tử

sẽ có kiểu chữ nghiêng.