Thuộc tính ".container > * " trong css có ý nghĩa gì?

.container > * {
    display:block;
    margin:50px auto;
}

Mình chưa vào gặp cách khai " >* ". Mình không hiểu như vậy là có ý nghĩa gì

Toàn kiến thức cơ bản có gì đâu mà chưa gặp với không hiểu. Dám cá là bạn không học 1 cách đàng hoàng khi học về CSS.

  • * là selector ảnh hưởng đến tất cả các thẻ, p, div, span,…

  • .[class-name] là css selector ảnh hưởng đến tất cả element có class được định nghĩa sau dấu .

VD: đoạn css bên dưới sẽ ảnh hưởng đến tất cả element có class là container

.container {
}
  • [selector 1] > [selector 2] => nghĩa là chọn tới element với [selector 2] nằm ngay bên trong [selector 1]. [selector 2] là con trực tiếp của [selector 1]
    VD: div > span sẽ áp dụng cho p nằm ngay bên trong 1 div, như ví dụ dưới thì chỉ <span>span1</span> là chịu ảnh hưởng.
<div>
    <span>span1</span>
   <p>
       <span>span2</span>
   </p>
</div>

Kết hợp 3 kiến thức trên thì đoạn css selector của bạn sẽ ảnh hưởng đến tất cả element là con trực tiếp của 1 element có class là container

.container > * {}

Simple, right?

7 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?