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

1. Selector * div

• Ý Nghĩa: Chọn tất cả các phần tử <div> 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ử <div> sẽ có màu nền là lightblue.

2. Selector p

• Ý Nghĩa: Chọn tất cả các phần tử <p> 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 <p> 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ử <p> nằm bên trong bất kỳ phần tử <div> nào, bất kể chúng là con hoặc cháu của <div>.
• Ví dụ:* div p { color: green; } Trong ví dụ này, tất cả các đoạn văn <p> bên trong bất kỳ phần tử <div> 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ử <p> đứng sau bất kỳ phần tử <div> nào và nằm cùng cấp với <div>. Đâ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 <p> đứng sau phần tử <div> 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ử <p> ngay sau ngay sau một phần tử <div> nào đó. Đây là selector “em” (adjacent sibling combinator).
• Ví dụ:* div + p { font-weight: bold; } Trong ví dụ này, phần tử <p> ngay sau phần tử <div> sẽ có chữ đậm.

6. Selector * div > p

• Ý Nghĩa: Chọn tất cả các phần tử <p> là con trực tiếp của bất kỳ phần tử <div> 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 <p> là con trực tiếp của phần tử <div> sẽ có kiểu chữ nghiêng.