Thêm vào scss

Bộ chọn CSS có thể chứa nhiều bộ chọn đơn giản. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm một bộ kết hợp

Bộ kết hợp là thứ giải thích mối quan hệ giữa các bộ chọn

Có bốn tổ hợp khác nhau trong CSS

• Bộ chọn hậu duệ (dấu cách)
• Bộ chọn con (>)
• Bộ chọn Anh chị em liền kề (+)
• Bộ chọn anh chị em chung (~)

Hãy cho chúng tôi xem cách chúng tôi có thể sử dụng các ký hiệu khác nhau (+, > và ~) trong bộ chọn CSS và sự khác biệt của chúng

Hãy để chúng tôi bắt đầu với một ví dụ HTML

<div class="container">
  <p>Apple</p>
  <div>
    <p>An apple a day keeps doctor away!</p>
  </div>
  <p>Banana</p>
  <p>Cherry</p>
</div>

1. Vũ trụ

Đây là một trong những bộ chọn được sử dụng phổ biến nhất trong CSS

div.container p {
 font-size: 20px;
}

As you can see in the code above, there is a space between div.container and p. It is called the Descendant selector. It will target all

tags within container div. That is, all

elements that are children of #container at any depth.

2. Ký hiệu ‘>’

Đây được gọi là bộ chọn con. Các quy tắc CSS sẽ được áp dụng cho các phần tử là con trực tiếp của phần tử cụ thể

div.container > p {
  border-bottom: 1px dashed black;
}

Trong ví dụ trên, có thể thấy rõ rằng bằng cách sử dụng bộ chọn "+" hoặc "dấu cộng", div được thay thế bằng phần tử p

dùng thử

Vì vậy, bây giờ bạn đã học được điều gì đó mới, đã đến lúc tự mình thử. Vì vậy, hãy tiếp tục và thử và nếu bạn gặp khó khăn ở bất cứ đâu, bạn luôn có thể quay lại ví dụ trên. Nếu bạn cảm thấy cần nhận được một số lời khuyên của chuyên gia cho các truy vấn của mình. Truy cập https. //hỏi. bao gồm trợ giúp. com/

>* nghĩa là gì trong CSS?

Dấu cộng có nghĩa là gì trong HTML?

Biểu tượng trong CSS là gì?

Dấu cộng trong sass là gì?