Wiele klas wewnątrz: nie()

Question

Próbuję użyć właściwości :not() wykluczyć parę klas z reguły, np:

*:not(.class1, class2) { display: none; } 

Jednak wygląda na to własność not() nie obsługuje oddzielone przecinkami klasy, jak pokazano w this fiddle.

HTML:

<div class='one'> 
    foo 
</div> 
<div class='two'> 
    foo 
</div> 
<div class='three'> 
    foo 
</div> 
<div class='four'> 
    foo 
</div> 

CSS:

div { 
    background-color: #CBA; 
} 

div:not(.one) { 
    background-color: #ABC; 
} 

div:not(.one, .three) { 
    color: #F00; 
} 

Pierwsze i drugie stosuje się zasady, ale trzeci nie.

Nie mogę wykonać *:not(.class1), *:not(.class2), ponieważ dowolny element, który ma class2 zostanie wybrany przez *:not(.class1) i odwrotnie.

nie chcę robić

* { display: none;} 
.class1, .class2 { display: inline; } 

ponieważ nie wszystkie .class1 i .class2 elementy mają taką samą oryginalną właściwości wyświetlania, a ja chcę, żeby go zatrzymać.

Jak wykluczyć wiele klas z reguły za pomocą właściwości not() lub w inny sposób?

Answer 1

Można użyć:

div:not(.one):not(.three) { 
    color: #F00; 
} 

Fiddle