Tên lớp được nối hoặc cách nhau bằng khoảng trắng

Question

Khi nào bạn tách các lớp kiểu với một khoảng trắng? Vì vậy, ví dụ: sự khác biệt giữa hai khối css sau đây là gì?

Lô 1:

div { 
    color: brown; 
} 

div.special { 
    font-size: 18px; 
} 

Khối 2:

div { 
    color: brown; 
} 

div .special { 
    font-size: 18px; 
} 

Đây là HTML:

<div class="special">The quick brown fox jumps over the lazy dog.</div> 

tôi đã cố gắng cả hai phiên bản. Chỉ với khối 1 văn bản có kích thước phông chữ 18.

Answer 1

Bạn phân tách các lớp theo không gian khi bạn muốn tham chiếu đến phần tử con cháu và bạn nối chúng khi bạn muốn tham chiếu đến một phần tử đơn lẻ với nhiều lớp.

Ví dụ: để tham chiếu đến div có hai lớp, ví dụ: <div class="foo bar"> bạn có thể sử dụng:

div.foo.bar {...} 

Để tham khảo các phần tử span con <div class="foo"><span class="bar">stuff</span></div> bạn có thể sử dụng:

div.foo .bar {...} 

Answer 2

Không gian lưu ý rằng đây là một mục con.

IE

div.special 

mục tiêu một div có class special khi

div .special 

mục tiêu một phần tử với lớp special bên trong một yếu tố div

Answer 3

Một không gian chỉ làm tổ:

div .foo /* .foo is inside div */ 

Không gian chỉ ra đặc hơn nữa:

div.foo /* any div that is also .foo */ 

Answer 4

div.special đề cập đến

<div class="special"> <- this 

div .special đề cập đến

<div> 
    <p class="special"> <- this 
</div> 

Không neccassily một p BTW

Answer 5

div.special sẽ chọn phần tử div trong đó có lớp .special và nó sẽ không chọn bất kỳ yếu tố khác với lớp .special vì vậy nếu bạn có một cái gì đó giống như <ul class="special"> sẽ được loại trừ, nơi như div .special này sẽ chọn tất cả các yếu tố có lớp .special được lồng vào bên trong div nên điều này sẽ chọn <ul class="special"> để nó kết luận rằng một 1 là khắt khe hơn so với thứ hai

vì vậy, trong trường hợp của bạn, hoặc bạn chỉ có thể sử dụng .special hoặc bạn có thể sử dụng div.special