làm cách nào để chọn một div có lớp "A" nhưng KHÔNG với lớp "B"?

Tôi có một số divs:làm cách nào để chọn một div có lớp "A" nhưng KHÔNG với lớp "B"?

<div class="A">"Target"</div> 
<div class="A B">"NotMyTarget"</div> 
<div class="A C">"NotMyTarget"</div> 
<div class="A D">"NotMyTarget"</div> 
<div class="A E">"NotMyTarget"</div>

Có một chọn CSS mà sẽ làm cho tôi div chứa Target nhưng không phải là các div chứa NotMyTarget?

Giải pháp phải làm việc trên IE7, IE8, Safari, Chrome và Firefox

Edit: Cho đến nay Nick là gần nhất. Đó là vụng về và tôi không thích những giải pháp, nhưng ít nhất nó hoạt động:

.A 
{ 
    /* style that all divs will take */ 
} 
div.B 
{ 
    /* style that will override style .A */ 
}

Nguồn

2010-03-20 MedicineMan

Câu hỏi của bạn có một chút công thức kém. Tiêu đề làm rõ những gì bạn muốn, nhưng mã và câu hỏi thì không. Câu trả lời đơn giản sẽ là: chỉ cần sử dụng '# Target'. Đối với câu trả lời cho câu hỏi trong tiêu đề: CSS3 có một bộ chọn ': not()', nhưng không phải tất cả các trình duyệt đều làm CSS3. – BalusC

Tôi thích giải pháp của Ron DeVera là thanh lịch hơn nhưng không thể làm cho nó hoạt động trên bất kỳ trình duyệt nào. Bất kỳ người bình luận nào có thể cho tôi biết liệu nó có hoạt động hoàn toàn không, và tôi chỉ cần tìm ra các chi tiết nhỏ? (bệnh ngày hôm nay, ít kiên nhẫn cho điều này) – MedicineMan

Tôi đã chỉnh sửa câu trả lời của mình để sử dụng 'nền', vì' phác thảo' không hoạt động trong các phiên bản cũ của IE. (Tôi thường sử dụng 'outline' làm CSS chẩn đoán mặc định của mình, vì - như' background' - nó không sửa đổi bố cục.) Chris Lively cũng vui lòng thêm một ví dụ làm việc đầy đủ vào câu trả lời của tôi. –

bạn có thể sử dụng bộ chọn thuộc tính để phù hợp với div rằng chỉ có một lớp:

div[class=A] { 
    background: 1px solid #0f0; 
}

Nếu bạn muốn chọn một div có nhiều lớp, sử dụng dấu ngoặc:

div[class="A C"] { 
    background: 1px solid #00f; 
}

Một số trình duyệt không hỗ trợ cú pháp selector thuộc tính. Như thường lệ, "một số trình duyệt" là chủ nghĩa euphemism cho IE 6 trở lên.

Xem thêm: http://www.quirksmode.org/css/selector_attribute.html

Full dụ:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .A { font-size:22px; } 
    .B { font-weight: bold; border: 1px solid blue; } 
    .C { color: green; } 

    div[class="A"] { 
     border: 1px solid red; 
    } 
    div[class="A B"] { 
     border: 3px solid green; 
    } 
    </style> 
</head> 
<body> 
    <div class="A">"Target"</div> 
    <div class="A B">"NotMyTarget"</div> 
    <div class="A C">"NotMyTarget"</div> 
    <div class="A D">"NotMyTarget"</div> 
    <div class="A E">"NotMyTarget"</div> 
</body> 
</html>

EDIT 2014/02/21: Bốn năm sau, :not tại là phổ biến rộng rãi, mặc dù tiết trong trường hợp cụ thể này:

.A:not(.B):not(.C):not(.D):not(.E) { 
    border: 1px solid red; 
}

Thật không may, điều này không 'Công việc t trong IE 7-8 như quy định trong câu hỏi: http://caniuse.com/#search=:not

Nguồn

2010-03-20 03:18:52

có vẻ rất hứa hẹn, rất tiếc là tôi không thể làm việc này. Có lẽ tôi đang làm điều gì sai ở đây. Bình luận: điều này chắc chắn có hoặc không hoạt động (FF, IE7, IE8, Safari)? – MedicineMan

Hoạt động tốt trong FF, Ie8, safari, v.v. với một loại tài liệu nghiêm ngặt. – NotMe

Chuỗi ': not()' cũng không giúp ích trong trường hợp bạn không thể hoặc không muốn xác định tên lớp nào cần loại trừ, miễn là nó được thêm vào 'A'. Đặt cược an toàn nhất, sau đó, là với một bộ chọn thuộc tính (miễn là khoảng trắng và tên lớp trùng lặp không phải là một vấn đề). – BoltClock

Tôi nghĩ rằng tốt nhất bạn có thể làm (cho đến CSS 3) là ghi đè lên các phong cách trong trường hợp này với những gì bạn không muốn từ lớp A B trong A, như thế này:

.A.B { /* Styles */ } 
.A { /* Reverse any styling you don't want */ }

Nguồn

2010-03-20 01:02:41

Tại sao lại đảo ngược kiểu dáng của lớp A nếu bạn chỉ có thể không bao gồm kiểu dáng cho lớp A? – Veger

@Verger - Vì 'class =" A B "' khớp '.A.B' và' .A' cả hai ... nhưng tôi hơi mệt, có thể tôi đã hoàn toàn ngược lại. –

@Nick - Đúng, nhưng 'class =" B "' chỉ khớp với '.B' và không cần bất kỳ sự đảo ngược nào :) (btw Tôi không biết về cú pháp '.AB', vì vậy cảm ơn vì điều đó!) – Veger

.A:not(.B) {}

Nhưng đoán xem ai không hỗ trợ mà ... Thật vậy, IE < = 8.

Nguồn

2010-03-20 09:07:12 Ms2ger

": not" là CSS3. Đây là biểu đồ tương thích: http://caniuse.com/#feat=css-sel3 – Elo

làm cách nào để chọn một div có lớp "A" nhưng KHÔNG với lớp "B"?

Trả lời

Các vấn đề liên quan