Kiểu CSS cho phần tử có lớp A và lớp B

Question

Tôi cần tạo kiểu cho phần tử có cả "a" và lớp "b". Tôi phải làm nó như thế nào?

Thứ tự các lớp xuất hiện trong html có thể khác nhau.

<style> 
div.a ? div.b{ 
color:#f00; 
} 
</style> 
<div class="a">text not red</div> 
<div class="b">text not red</div> 
<div class="a b">red text</div> 
<div class="b a">red text</div> 

Answer 1

Đó là hoàn toàn có thể. Nếu bạn chỉ định hai lớp trên một phần tử (không có bất kỳ dấu cách nào), điều đó có nghĩa là nó phải có cả hai cho quy tắc để áp dụng.

div.a { 
 
    color: blue; 
 
} 
 
div.b { 
 
    color: green; 
 
} 
 
div.a.b { 
 
    color: red; 
 
}

<div class="a"> 
 
    A 
 
</div> 
 
<div class="b"> 
 
    B 
 
</div> 
 
<div class="a b"> 
 
    AB 
 
</div>

Answer 2

Yeah, sử dụng một lớp thông thường, hoặc tại sao không, JavaScript nếu những thay đổi nội dung động

Answer 3

selectors Class có thể được kết hợp:

div.a.b { 
    color: red; 
} 

Trích dẫn từ the spec:

Để phù hợp với một tập hợp con của các giá trị "lớp học", mỗi giá trị phải bắt đầu bằng dấu ".".

Ví dụ, các quy tắc sau đây phù hợp với bất kỳ yếu tố P mà "class" thuộc tính đã được chỉ định một danh sách các giá trị không gian tách ra bao gồm "mục vụ" và "biển":

p.marine.pastoral { color: green } 

Quy tắc này phù hợp khi class="pastoral blue aqua marine" nhưng không khớp với class="pastoral blue".

Answer 4

div[class~="a"][class~="b"]{ 
color:#f00; 
} 

Answer 5

/* chọn thẻ div có class a và b cùng */

<style> 
    div.a.b 
    { 
     color:#f00; 
    } 
    </style> 
    <div class="a">text not red</div> 
    <div class="b">text not red</div> 
    <div class="a b">red text</div> 
    <div class="b a">red text</div>