Bu düzen var:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

CSS kuralları: bu

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-color: rgba(255, 255, 255, 0.8);
    border-top: 2px solid;
    content: attr(id) ' - ' attr(class);
}

#sectors > div:nth-of-type(3n 1) {
    margin-left: 0;
}

#sectors > div.alpha { color: #b00; background-color: #ffe0d9; }
#sectors > div.beta  { color: #05b; background-color: #c0edff; }
#sectors > div.gamma { color: #362; background-color: #d4f6c3; }

Bir WordPress kullanmak aksi sınıfları alpha, beta gamma yok sektör unassigned sınıf eklemek için kullanın:

$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');

Daha sonra bu sınıf için biraz farklı kurallar geçerlidir:

#sectors > div.unassigned {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div.unassigned::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div.unassigned:hover {
    opacity: 1.0;
}

Ve her şey modern tarayıcılarda sorunsuz çalışıyor.

Interactive jsFiddle preview

Ama :not() selector in jQuery görünce :not() in CSS3 fazladan bir sınıf jQuery kullanarak ekleme güvenmek zorunda kalmazdım yani doğrudan benim stil taşınmak düşünüyordum dayanmaktadır. Ayrıca, IE eski sürümleri destekleyen pek ilgimi çekmiyor, ve diğer tarayıcılar :not() seçici için mükemmel bir destek var.

.unassigned bölümü değişen bu sektörler sadece A ve benim düzen içinde Beta Gamma ben bilerek) yukarıda çalışıyorum:

#sectors > div:not(.alpha, .beta, .gamma) {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div:not(.alpha, .beta, .gamma)::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div:not(.alpha, .beta, .gamma):hover {
    opacity: 1.0;
}

Ama ben en kısa sürede bu çalışma dururtüm tarayıcılar! Atanmamış benim sektörler gri, ya '' artık. Atanmamış silik etiketli değil

Updated but not so interactive jsFiddle preview

Neden :not() seçici jQuery iş ama CSS başarısız mı? Bu bir WordPress kullanmak iddiaları bu yana her iki yerde de aynı iş için "CSS3 Uyumlu", yoksa kaçırdığım bir şey mi var? gerekmez mi

Bunun için saf CSS bir geçici çözüm vardır ya da bir komut güvenmek zorunda mıyım?

Neden :not() seçici jQuery iş ama CSS başarısız mı? Bu bir WordPress kullanmak iddiaları bu yana her iki yerde de aynı iş için "CSS3 Uyumlu", yoksa kaçırdığım bir şey mi var? gerekmez mi

Belki degerekirortaya bu çıktı , amayok: jQuery you can pass any selector to it, ne kadar karmaşık olabilir ve olursa olsun gibi :not() seçici uzatır ^em>Şüpheleniyorumbunun ana sebebi de keyfi karmaşık herhangi bir seçici sürer .not() method ve filtreler buna göre paritesi için. Bir şekilde CSS gibi bir sözdizimi bakımını yapar, ama standart tanımlı ne uzanan.

Başka bir örnek olarak, bu gayet güzel çalışıyor (inanılmaz saçma bir örnek soruya verilen ne göre biliyorum, ama sadece görsel amaçlı değil):

/* 
 * Select any section
 * that's neither a child of body with a class
 * nor a child of body having a descendant with a class.
 */
$('section:not(body > [class], body > :has([class]))')

jsFiddle preview

:not() seçiciler virgülle ayrılmış listesi geçen elemanları süzme anlamına geldiğini unutmayınlistelenen seçiciler herhangi bir maç yok.

:not() pseudo-class in Selectors level 3 diğer taraftan, çok sınırlı, şimdi kendisi tarafından. Tek iletebilirsiniztek basit bir seçici:not() bağımsız değişkeni olarak. Bu bir anda bunlardan sadece herhangi bir geçiş anlamına gelir:

• Evrensel seçici (*), isteğe bağlı olarak namespace ile
• Tip seçici (*, div, , *, *37span*36a, vb), isteğe bağlı olarak namespace ile
• Öznitelik seçicisi ([att], [att=val], vs.), isteğe bağlı olarak namespace ile
• Sınıf seçici (.class)
• ID seçici (#id)
• Pseudo-class (:pseudo-class)

Yani, burada jQuery's :not() selector ve the current standard's :not() selector arasındaki farklar:

1. Birincisi ve en önemlisi, doğrudan soruya cevap vermek: virgülle ayrılmış bir seçici listesi geçemezsiniz.¹Verilen seçici keman gösterildiği gibi bir WordPress kullanmak çalışır, ancak örneğin, geçerli CSS değil

   /* If it's not in the Α, Β or Γ sectors, it's unassigned */
   #sectors > div:not(.alpha, .beta, .gamma)
   

   Bunun için saf CSS bir geçici çözüm vardır ya da bir komut güvenmek zorunda mıyım?

   Neyse ki, bu durumda, var. Sadece geçerli CSS yapmak için birbiri ardına zincir çoklu :not() seçiciler, bir, var:

   #sectors > div:not(.alpha):not(.beta):not(.gamma)
   

   Seçici yapmazbuçok daha uzun, ama tutarsızlık ve sıkıntı belirgin kalır.

   Updated interactive jsFiddle preview

2. :not() ile kullanım için bileşik seçiciler basit seçiciler birleştirebilirsiniz. Bu bir WordPress kullanmak çalışır, ama geçersiz CSS:

   /* Do not find divs that have all three classes together */
   div:not(.foo.bar.baz)
   

   Birden çok olumsuz yönleri (zincir değil!) üzere ikiye ayırmak gerekir bunu geçerli yapmak için CSS:

   div:not(.foo), div:not(.bar), div:not(.baz)
   

   Gördüğünüz gibi, bu noktada 1'den bile daha zahmetli bir iştir.

3. Combinators kullanabilirsiniz. Bu DV ama CSS çalışır:

   /* 
    * Grab everything that is neither #foo itself nor within #foo.
    * Notice the descendant combinator (the space) between #foo and *.
    */
   :not(#foo, #foo *)
   

   Bu öncelikle hiçbir şekilde çözüm olduğundan özellikle kötü bir durumda. Bazı vardırgevşekgeçici (1 2), ama onlar hemen hemen her zaman HTML yapısına bağlıdır ve bu nedenle yarar çok sınırlıdır.

4. Bir tarayıcı uygulayan querySelectorAll() :not() * kullanarak :not() bir dize seçici bir şekilde yapar bunu geçerli bir CSS seçici neden olacak bir yöntem dönmek sonuçlar doğrudan yerine düşen geri Cızırtı (jQuery seçici motoru olan uygular :not() uzantısı). Eğer performans konusunda çok titiz iseniz, bu kesinlikle üzerinde salgılamak olacak olumlu küçük bir bonus.

İyi haber Selectors 4 enhances the :not() selector karmaşık seçiciler virgülle ayrılmış bir listesini sağlar. Karmaşık bir seçici sadece basit veya bileşik yalnız bir seçici veya seçiciler bileşik combinators ayrılmış koca bir zincir. Kısacası, her şeyi yukarıya bakın.

Bu bir WordPress kullanmak yukarıdaki örnekler, CSS uygulamaları önümüzdeki yıllarda bunu destekleyen başladığında sözde sınıf daha yararlı hale getirecek 4 seçiciler, seviye geçerli olacağı anlamına geliyor.

¹this article 3, olmak zorunda değilsin Firefox :not() seçiciler virgülle ayrılmış listesi iletebilirsiniz söylüyor rağmen. Eğer çalışıyor Firefox 3 olarak bu makalede iddia ediyor, çünkü bir hata Firefox 3 için hangi bulamıyorum bileti artık, ama olmamalı çalışmak kadar gelecek tarayıcılar standartları uygulamak gelecek. Görünce ne kadar sıklıkla bu makalede belirtilen tarih, unutmuşum comment bu yönde, ama görmek de ne kadar eski yazı ve ne kadar seyrek sitesi güncellendiği, gerçekten haberim yok saymaya yazar döndüğün için Düzelt.