Sự khác biệt giữa các bộ chọn div + p (cộng) và div ~ p (dấu ngã)

Cách w3schools cụm từ, chúng nghe giống nhau.

Tham chiếu CSS của W3Schools

div + p
Chọn tất cả các <p>phần tử được đặt ngay sau <div>các phần tử

div ~ p
Chọn mọi <p>phần tử đứng trước một <div>phần tử

Nếu một <p>phần tử đứng ngay sau một <div>phần tử, điều đó không có nghĩa là <p>phần tử đó đứng trước một <div>phần tử sao?

Nhưng dù sao, tôi đang tìm một bộ chọn nơi tôi có thể chọn một phần tử được đặt ngay trước một phần tử nhất định.

Bộ chọn anh chị em kế cận X + Y

Các bộ chọn anh em kế cận có cú pháp sau: E1 + E2, trong đó E2 là đối tượng của bộ chọn. Bộ chọn khớp nếu E1 và E2 chia sẻ cùng một nguồn gốc trong cây tài liệu và E1 ngay lập tức đứng trước E2, bỏ qua các nút không phải phần tử (chẳng hạn như các nút văn bản và chú thích).

ul + p {
   color: red;
}

Trong ví dụ này, nó sẽ chỉ chọn phần tử đứng ngay trước phần tử trước đó. Trong trường hợp này, chỉ đoạn đầu tiên sau mỗi ul mới có chữ màu đỏ.

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

Bộ chọn anh chị em chung X ~ Y

Bộ tổ hợp ~ phân tách hai bộ chọn và chỉ khớp với phần tử thứ hai nếu nó đứng trước phần tử thứ nhất và cả hai đều có chung cha mẹ.

ul ~ p {
   color: red;
}

Bộ tổ hợp anh chị em này tương tự như X + Y, tuy nhiên, nó ít nghiêm ngặt hơn. Trong khi một bộ chọn liền kề (ul + p) sẽ chỉ chọn phần tử đầu tiên ngay trước bộ chọn cũ, thì phần tử này mang tính tổng quát hơn. Nó sẽ chọn, tham chiếu đến ví dụ của chúng tôi ở trên, bất kỳ phần tử p nào, miễn là chúng tuân theo một ul.

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

Nguồn

code.tutsplus

Bộ chọn anh em chung MDN

Bộ chọn anh chị em kế cận w3

Nếu một <p>phần tử đứng ngay sau một <div>phần tử, điều đó không có nghĩa là <p>phần tử đó đứng trước một <div>phần tử sao?

Chính xác. Nói cách khác, div + plà một tập hợp con thích hợp của div ~ p- bất cứ thứ gì khớp với cái trước cũng được khớp với cái sau, bởi cần thiết.

Sự khác biệt giữa +và ~là ~đối sánh với tất cả các anh chị em sau đây bất kể họ ở gần nhau từ phần tử đầu tiên, miễn là cả hai đều có chung cha mẹ.

Cả hai điểm này đều được minh họa ngắn gọn nhất bằng một ví dụ duy nhất, trong đó mỗi quy tắc áp dụng một thuộc tính khác nhau. Lưu ý rằng quy tắc pngay sau divquy tắc đã áp dụng cả hai quy tắc:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

Nhưng dù sao, tôi đang tìm một bộ chọn nơi tôi có thể chọn một phần tử được đặt ngay trước một phần tử nhất định.

Thật không may, vẫn chưa có một .

hãy xem xét ví dụ này:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

1) Bộ chọn anh chị em liền kề (S1 + S2)

Bộ chọn anh chị em liền kề được sử dụng để chọn một phần tử được chỉ định nằm ngay bên cạnh một phần tử được chỉ định khác. Cả hai yếu tố phải ở cùng một cấp độ.

div + p {
    color:red;
}

Ví dụ về Bộ chọn anh chị em liền kề

2) Bộ chọn anh chị em chung (S1 ~ S2)

Bộ chọn anh chị em chung được sử dụng để chọn tất cả các phần tử anh em được chỉ định của một phần tử được chỉ định khác.

div ~ p {
   color:red;
}

Ví dụ về Bộ chọn anh chị em chung

Bộ chọn Anh chị em liền kề (S1 + S2) so với Anh chị em chung (S1 ~ S2):

Bộ chọn anh em kế cận (S1 + S2) chỉ chọn phần tử anh em ngay lập tức nhưng bộ chọn anh em chung (S1 ~ S2) chọn tất cả các phần tử anh em của một phần tử được chỉ định khác. Cả hai trường hợp, cả hai phần tử (S1 và S2) phải ở cùng một mức.

Các bộ chọn còn lại được giải thích tại đây: https://www.csssolid.com/35-css-selectors-to-remember.html