Khoảng trắng có nghĩa là gì trong bộ chọn CSS? tức là Sự khác biệt giữa .classA.classB và .classA .classB là gì?

Sự khác biệt giữa hai bộ chọn này là gì?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

.classA.classBđề cập đến một phần tử có cả hai lớp A và B ( class="classA classB"); trong khi .classA .classBđề cập đến một phần tử có class="classB"hậu duệ từ một phần tử với class="classA".

Chỉnh sửa: Thông số để tham khảo: Bộ chọn thuộc tính (Xem phần 5.8.3 Bộ chọn lớp)

Kiểu như thế này phổ biến hơn nhiều và sẽ nhắm mục tiêu đến bất kỳ loại phần tử nào của lớp "classB" được lồng bên trong bất kỳ loại phần tử nào của lớp "classA".

.classA .classB {
  border: 1px solid; }

Ví dụ, nó sẽ hoạt động trên:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Tuy nhiên, phần tử này nhắm mục tiêu đến bất kỳ loại phần tử nào vừa là lớp "classA", vừa là lớp "classB". Kiểu này ít xuất hiện hơn nhưng vẫn hữu ích trong một số trường hợp.

.classA.classB {
  border: 1px solid; }

Điều này sẽ áp dụng cho ví dụ này:

<p class="classA classB">asdf</p>

Tuy nhiên, nó sẽ không ảnh hưởng đến những điều sau:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Lưu ý rằng khi một phần tử HTML có nhiều lớp, chúng được phân tách bằng dấu cách.)

.classA.classBnó có nghĩa là các phần tử có cả hai tên lớp sẽ được chọn trong khi .classA .classBcó nghĩa là phần tử có tên lớp classBbên trong classAsẽ chỉ được chọn.