: Not () sözde sınıfının birden fazla bağımsız değişkeni olabilir mi?

746

Ben seçmek çalışıyorum inputbütün unsurlarını typehariç s radiove checkbox.

Birçok kişi birden fazla argüman koyabileceğinizi gösterdi :not, ancak kullanmak typeyine de işe yaramıyor gibi görünüyor.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Herhangi bir fikir?

css css-selectors

— delphi
kaynak

24

"Birçok kişi birden fazla argüman koyabileceğinizi gösterdi: değil" Ya ya bu insanlar popüler olarak referans verilen ancak ciddi şekilde yanıltıcı olan belirli bir makaleden alıntı yapıyorlardı ya da CSS'den değil jQuery'den bahsediyorlardı. Verilen seçicinin jQuery'de aslında geçerli olduğunu, ancak CSS'de olmadığını unutmayın. Farkları detaylandıran bir Soru-Cevap yazdım: stackoverflow.com/questions/10711730/… (cevap ayrıca bu makalede yer almaktadır)

— BoltClock

10

Tebrikler! Resmi baskı çıkmadan 2 yıl öncesindeki örneğinizde geçerli CSS4.0'ı başarıyla yazdınız.

— Jack Giffin

1

@Jack Giffin: Hangi "resmi baskıya" atıfta bulunuyorsunuz? Bu soru, seçicilerin FPWD'sini 5 ay öncesine dayanıyor ve spesifikasyon hala tamamlanmaya yakın değil: w3.org/TR/2011/WD-selectors4-20110929/#negation Ve ilk uygulamadan önce 4 buçuk yıl : stackoverflow.com/questions/35993727/…

— BoltClock

1536

Neden: sadece iki tane kullanmayın :not:

input:not([type="radio"]):not([type="checkbox"])

_{Evet, kasıtlı}

— Felix Kling
kaynak

4

Bunun yüksek bir özgüllüğü vardır.

— Dağılma

63

Mizah alamayanlar için: :karakteriyle "Neden olmasın ..." dedi .

— totymedli

11

Bir yan not olarak, sizin gibi bir şey input:not('.c1'), input:not('c2')yaparsanız, her iki sınıfın da eşleşmesi için girdi üzerinde olması gereken bir "ve" durumu ile sonuçlanır.

— Cloudkiller

3

@BoltClock Gecikmeli, ancak bu nedenle :not([attr],[attr])CSV formatı için istek:

— --P

3

@Cloudkiller hayır herhangi bir girdi öğesini seçer -> "c1 sınıfı olmadan girdi VEYA c2 sınıfı olmadan girdi"

— David Callanan

48

Projenizde SASS kullanıyorsanız, bu karışımın hepimizin istediği şekilde çalışmasını sağlamak için yaptım:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

2 şekilde kullanılabilir:

1.Seçenek: Yoksayılan öğeleri satır içi listeleyin

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

2.Seçenek: Göz ardı edilen öğeleri önce bir değişkende listeleyin

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

Her iki seçenek için de çıktı CSS

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— Daniel Tonon
kaynak

6

oduncu almak yerine odun deposuna gitmesini istemek gibi değil mi?

— osirisgothra

Ne? bu nedenle .selector: not (.one): not (.two): not (.three): not (.four) {...} yerine .selector {@include not ('. one', ' .iki üç dört') { ... } } ?

— Daniel Tonon

2

Verimlilik açısından: evet. Yol daha az 'karakter ve imo daha verimli kod.

— Daan

:not()= Öğe başına 6 karakter; '',= Öğe başına 3 karakter. @includebir kısayol tuşuna atanmalıdır, bu yüzden bunu bir karakter olarak sayacağım (yazmak açısından). Teknik olarak, ondan o kadar nefret ediyorsanız, listedeki tek tırnak işaretlerini bile kullanmanız gerektiğini düşünmüyorum. Yine de editörlerin çıldırmasını önlemeye yardımcı olurlar. Buna dayanarak, hala yolumun yazmanın daha etkili bir yolu olduğunu düşünüyorum.

— Daniel Tonon

2

@DaanHeskes ayrıca tüm: not () vakalarını yazmanın bunları listelemek için bir değişken kullanmanıza izin vermediğini de gösterir.

— 18:16 '

30

Seçicide birden çok argüman kullanmak CSS Seçiciler 4'ten başlayarak :notmümkün hale gelir ( buraya bakın ).

CSS3'te: not selector yalnızca 1 seçiciye bağımsız değişken olarak izin verir. Seviye 4 seçicilerinde, bir seçici listesini argüman olarak alabilir.

Misal:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

Ne yazık ki, tarayıcı desteği sınırlıdır . Şimdilik sadece Safari'de çalışıyor.

— Pieter Meiresone
kaynak

3

caniuse.com'a göre , hala sadece Safari tarafından destekleniyor

— slanden

8

CSS 4 değil, CSS Seçici Seviye 4'ü unutmayın, CSS 4 diye bir şey yoktur ve muhtemelen asla olmayacaktır.

— Edu Ruiz

8

Bu konuda bazı sorunlar yaşıyordum ve "X: not (): not ()" yöntemi benim için çalışmadı.

Bu stratejiye başvurdum:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

Neredeyse eğlenceli değil, ama şu anda benim için çalıştı: not () pugnacious. İdeal değil, ama sağlam.

— eatCasserole
kaynak

5

Eğer varsa "cssnext" Post CSS eklentisini yükleyin , o zaman güvenli bir şekilde şu anda kullanmak istediğiniz sözdizimi kullanarak başlayabilirsiniz.

Cssnext kullanmak şunu döndürür:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Bunun içine:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

— Daniel Tonon
kaynak