Nhắm mục tiêu các thành phần có nhiều lớp, trong một quy tắc

Question

Tôi có một số HTML có các thành phần có nhiều lớp và tôi cần chỉ định chúng trong một quy tắc để các lớp giống nhau có thể khác nhau trong các vùng chứa khác nhau. Nói rằng tôi có điều này trong CSS của tôi:

.border-blue { 
    border: 1px solid blue; 
} 
.background { 
    background: url(bg.gif); 
} 

Sau đó, tôi có điều này trong HTML của tôi:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div> 

Tôi có thể nhắm mục tiêu các bên trong một quy tắc duy nhất? Như thế này, ví dụ, mà tôi biết không hoạt động:

.border-blue, .background { 
    border: 1px solid blue; 
    background: url(bg.gif); 
} 

Answer 1

.border-blue.background { ... } là cho một mục với nhiều lớp.
.border-blue, .background { ... } là dành cho nhiều mục với từng hạng mục của riêng chúng.
.border-blue .background { ... } là dành cho một mục có '.background' là con của '.border-blue'.

Xem Chris' answer để có giải thích kỹ lưỡng hơn.

Answer 2

Chỉ trong trường hợp ai đó tình cờ gặp điều này như tôi đã làm và không nhận ra, hai biến thể ở trên là dành cho các trường hợp sử dụng khác nhau.

Sau đây:

.blue-border, .background { 
    border: 1px solid #00f; 
    background: #fff; 
} 

là khi bạn muốn thêm phong cách đến các phần tử có một trong hai màu xanh biên giới hoặc lớp nền, ví dụ:

tất cả

<div class="blue-border">Hello</div> 
<div class="background">World</div> 
<div class="blue-border background">!</div> 

sẽ nhận được một màu xanh biên giới và nền trắng áp dụng cho họ.

Tuy nhiên, câu trả lời được chấp nhận là khác nhau.

.blue-border.background { 
    border: 1px solid #00f; 
    background: #fff; 
} 

này áp dụng phong cách đến các yếu tố có cả lớp học như vậy trong ví dụ này chỉ <div> với cả hai lớp sẽ nhận được phong cách áp dụng (trong các trình duyệt giải thích CSS đúng):

<div class="blue-border">Hello</div> 
<div class="background">World</div> 
<div class="blue-border background">!</div> 

Vì vậy, về cơ bản nghĩ về nó như thế này, phân cách bằng dấu phẩy áp dụng cho các phần tử có một lớp HOẶC một lớp khác là và dấu chấm được áp dụng cho các phần tử có một lớp VÀ một lớp khác.