CSS: Kiểu được áp dụng cho tổ hợp các lớp?

Question

Tôi không chắc chắn điều này là có thể, nhưng có một cú pháp được sử dụng trong CSS khi bạn muốn tạo kiểu cho một phần tử dựa trên sự kết hợp các lớp được áp dụng cho nó không?

Tôi hiểu rằng tôi có thể kiểm tra một phần tử với jQuery hoặc một cái gì đó và thay đổi phong cách của nó dựa trên các lớp có, nhưng có cách CSS thuần túy để làm điều này không?

Ví dụ, nếu tôi có một lớp học cho đậm và xanh lá cây:

.bold_green { color:green; font-weight:bold; } 

Và một lớp cho đậm và màu xanh:

.bold_blue { color:blue; font-weight:bold. } 

Bây giờ, nói rằng tôi đang sử dụng jQuery để thêm và loại bỏ các lớp học tự động và muốn bất kỳ phần tử nào có cả hai lớp để chuyển sang màu hồng nghiêng.

Cái gì như:

.bold_green AND .bold_blue { color:pink; font-style:italic; } 

Hoặc, nếu tôi muốn phong cách một yếu tố mà có Aclass, và là một hậu duệ của một phần tử có lớp khác?

Cái gì như:

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; } 

Cảm ơn!

Sửa

Cảm ơn tất cả các câu trả lời. Đây là khá nhiều những gì tôi nghĩ (chỉ cần xử lý các lớp học như là bộ chọn thông thường), nhưng họ dường như không làm việc cho tôi. Tôi sẽ phải kiểm tra mã của tôi và chắc chắn rằng họ không được ghi đè bằng cách nào đó ...

Answer 1

$('.bold_green.bold_blue').addClass('something-else'); 

Hoặc trong CSS:

.bold_green.bold_blue { color: pink; } 

Chú ý không có khoảng trống giữa các selectors.

Answer 2

Bạn không cần bất cứ điều gì đặc biệt, chỉ cần

.bold_green.bold_blue { color:pink; font-style:italic; } 

Answer 3

Paul và Voyager là chính xác đối với trường hợp nhiều lớp.

Đối với "CÓ CON" trường hợp bạn sẽ sử dụng:

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */ 

Mà sẽ style bất kỳ bold_blue yếu tố bên trong một yếu tố bold_green.

Hoặc nếu bạn muốn có một đứa trẻ TRỰC TIẾP:

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */ 

Mà sẽ phong cách chỉ bold_blue yếu tố đó có một phụ huynh ngay lập tức bold_green.

Answer 4

Trong visual studio 2013 thiết lập CSS được áp dụng cho nhiều lớp bởi một "Comma" như sau:

.bold_green, .bold_blue { color:pink; font-style:italic; }