Chọn phần tử dựa trên nhiều lớp

360

Tôi có một quy tắc kiểu tôi muốn áp dụng cho thẻ khi nó có hai lớp. Có cách nào để thực hiện điều này mà không cần JavaScript không? Nói cách khác:

<li class='left ui-class-selector'>

Tôi muốn áp dụng quy tắc phong cách của tôi chỉ nếu licó cả hai .leftvà .ui-class-selectorlớp ứng dụng.

css css-selectors

— Ciel
nguồn

css-tricks.com/mult

— Môn- class

Câu trả lời:

595

Ý bạn là hai lớp? "Chuỗi" các bộ chọn (không có khoảng cách giữa chúng):

.class1.class2 {
    /* style here */
}

Điều này chọn tất cả các yếu tố với class1đó cũng có class2.

Trong trường hợp của bạn:

li.left.ui-class-selector {

}

Tài liệu chính thức: Bộ chọn lớp CSS2 .

Như akamike chỉ ra một vấn đề với phương pháp này trong Internet Explorer 6, bạn có thể muốn đọc điều này: Sử dụng các lớp kép trong IE6 CSS?

— Kling
nguồn

Xin lưu ý rằng IE6 không thích những thứ này, vì nó không đọc chuỗi các lớp. Nó sẽ chỉ nhìn vào lớp cuối cùng trong chuỗi.

— akamike

không phải vậy :) Tất cả các trang web lớn đã giảm, đang giảm hoặc đang có kế hoạch giảm trong hỗ trợ tương lai gần cho IE6 .. Làm tương tự!

— Thomas Bonini

@Andreas Bonini: Vâng tôi biết. Thành thật mà nói tôi đã không quan tâm đến IE6 trong một thời gian dài. (Tôi đã xóa nhận xét trước đó của mình vì tôi tìm thấy câu hỏi khác liên quan đến vấn đề này.)

— Felix Kling

Vâng, bạn hoàn toàn không thể sử dụng chúng trong IE6, chỉ mất các tuyến đường dài hơn để tạo kiểu cho các yếu tố của bạn. Ví dụ, tạo kiểu riêng cho từng lớp và sử dụng độ đặc hiệu CSS phù hợp để ghi đè tốt nhất có thể.

— akamike

Tôi thích nhớ nhảy múa trên mộ của IE6. Tôi thậm chí đã không phải hỗ trợ IE10 trong năm nay và việc bỏ hoàn toàn IE là điều tất yếu. Tôi yêu tương lai. ☺

— Michael Scheper

Bộ chọn chuỗi không chỉ giới hạn ở các lớp, bạn có thể làm điều đó cho cả lớp và id.

Các lớp học

.classA.classB {
/*style here*/
}

Lớp & Id

.classA#idB {
/*style here*/
}

Tôi đã làm

#idA#idB {
/*style here*/
}

Tất cả các trình duyệt hiện tại tốt đều hỗ trợ điều này ngoại trừ IE 6, nó chọn dựa trên bộ chọn cuối cùng trong danh sách. Vì vậy, ". ClassA. ClassB" sẽ chọn chỉ dựa trên ". ClassB".

Đối với trường hợp của bạn

li.left.ui-class-selector {
/*style here*/
}

hoặc là

.left.ui-class-selector {
/*style here*/
}

— nidhi0806
nguồn

Id & Id là một bộ chọn lạ về mặt khái niệm.

— Félix Gagnon-Grenier

Bạn có thể sử dụng các giải pháp sau:

Các quy tắc CSS áp dụng cho tất cả các thẻ có hai lớp sau:

.left.ui-class-selector {
    /*style here*/
}

Các quy tắc CSS áp dụng cho tất cả các thẻ có <li>hai lớp sau:

li.left.ui-class-selector {
   /*style here*/
}

Giải pháp jQuery:

$("li.left.ui-class-selector").css("color", "red");

Giải pháp Javascript:

document.querySelector("li.left.ui-class-selector").style.color = "red";

— bahman Parsamanesh
nguồn