Cách tham chiếu div với class = "name1 name2"?

Question

tôi đang làm việc trên một số CSS từ một hướng dẫn, một div có class này:

<div class="related products"> 

Làm thế nào tôi có thể tham khảo nó trong stylesheet?

Answer 1

Thực tế có hai lớp, related và products. Bạn có thể tham chiếu nó trong biểu định kiểu của mình với .related hoặc .products và nó sẽ lấy kiểu từ cả hai quy tắc đó. Ví dụ, với CSS sau đây, văn bản trong div trong câu hỏi của bạn sẽ xuất hiện màu đỏ với cỡ chữ 12:

.related { color:#ff0000 } 
.products { font-size:12px } 

Nếu bạn muốn chọn các yếu tố với cả hai lớp, sử dụng .related.products trong stylesheet của bạn. Ví dụ: thêm thông tin sau vào ví dụ trên:

.related.products { font-weight:bold } 

Và văn bản trong div của bạn sẽ nhận được cả ba quy tắc vì nó khớp với cả 3 bộ chọn. Đây là một hoạt động example.

Answer 2

Trong css, chỉ cần đặt lớp tên của div bằng cách làm này:

.related products { 
/*styling to go here*/ 
} 

Bây giờ bất kỳ phong cách trong lớp sản phẩm có liên quan sẽ được áp dụng cho div đó.

Answer 3

div.related.products là phương pháp chung

Answer 4

Bạn tham khảo nó bằng cách div.related.products mà literaly dịch ra là "một div với lớp có liên quan và đẳng cấp của sản phẩm".

Hoặc bạn có thể tham chiếu bằng cách sử dụng hoặc tên lớp vì nó sẽ bắt cả hai.

jsFiddle Example.