Không gian có ý nghĩa gì trong bộ chọn CSS? tức là sự khác nhau giữa .classA.classB và .classA .classB là gì?

Question

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; 
} 

Answer 1

.classA.classB đề cập đến một yếu tố mà 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" được hạ xuống từ một phần tử có class="classA".

Edit: Spec để tham khảo: Attribute Selectors (Xem phần 5.8.3 Lớp Selectors)

Answer 2

Một phong cách như thế này còn lâu mới phổ biến hơn, và sẽ nhắm mục tiêu bất kỳ loại thành phần của lớp "ClassB" được lồng vào bên trong bất kỳ loại phần tử của lớp "classA".

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

Nó sẽ làm việc, ví dụ, vào lúc:

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

một này, tuy nhiên, mục tiêu bất kỳ loại của nguyên tố đó là cả lớp "classA", cũng như lớp "ClassB". Kiểu kiểu này ít được nhìn thấy hơn, nhưng vẫn hữu ích trong một số trường hợp.

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

này sẽ áp dụng cho ví dụ này:

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

Tuy nhiên, nó sẽ không có hiệu lực thi hành 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 học, chúng được phân cách bằng dấu cách.)