สามารถ: หลอก () หลอกระดับมีหลายอาร์กิวเมนต์?

746

ฉันพยายามที่จะเลือกinputองค์ประกอบของทุกtypes ยกเว้นและradiocheckbox

มีหลายคนที่แสดงให้เห็นว่าคุณสามารถใส่อาร์กิวเมนต์ได้หลายอย่าง:notแต่การใช้typeดูเหมือนจะไม่ได้ผลฉันก็ลองใช้ดู

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

ความคิดใด ๆ

css css-selectors

— เดลฟาย
แหล่งที่มา

24

"หลายคนแสดงให้เห็นว่าคุณสามารถใส่อาร์กิวเมนต์หลายข้อใน: ไม่ใช่" คนเหล่านั้นกำลังอ้างถึงบทความบางบทความที่มีการอ้างอิงที่นิยม แต่ทำให้เข้าใจผิดอย่างรุนแรงหรือพวกเขากำลังพูดถึง jQuery ไม่ใช่ CSS โปรดทราบว่าตัวเลือกที่กำหนดนั้นใช้งานได้จริงใน jQuery แต่ไม่ใช่ใน CSS ฉันเขียนคำถาม & รายละเอียดเกี่ยวกับความแตกต่าง: stackoverflow.com/questions/10711730/ (คำตอบยังระบุว่าบทความด้านข้าง)

— BoltClock

10

ขอแสดงความยินดี! คุณเขียน CSS4.0 ที่ถูกต้องสำเร็จในตัวอย่างของคุณด้านบน 2 ปีก่อนที่จะมีการเปิดตัวอย่างเป็นทางการ

— Jack Giffin

1

@ Jack Giffin: คุณหมายถึง "รุ่นทางการ" คำถามนี้ให้ล่วงหน้าวันที่ FPWD ของ selectors-4 โดย 5 เดือนเท่านั้นและข้อมูลจำเพาะยังคงใกล้จะเสร็จสมบูรณ์: w3.org/TR/2011/WD-selectors4-20110929/#negationและก่อนวันที่การใช้งานครั้งแรกโดย4 ปีครึ่ง : stackoverflow.com/questions/35993727/…

— BoltClock

1536

ทำไม: ไม่ใช่แค่ใช้สองอย่าง:not:

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

_{ใช่มันเป็นความตั้งใจ}

— เฟลิกซ์ลิ่ง
แหล่งที่มา

4

สิ่งนี้มีความเฉพาะเจาะจงสูง

— Undistraction

63

สำหรับผู้ที่ไม่ได้รับอารมณ์ขัน: เขาพูดว่า "ทำไมไม่ ... " ด้วย:ตัวละคร

— totymedli

11

ในฐานะที่เป็นบันทึกย่อด้านข้างหากคุณทำบางสิ่งบางอย่างเช่นinput:not('.c1'), input:not('c2')คุณจบลงด้วยสถานการณ์ "และ" ที่ทั้งสองคลาสจะต้องมีการป้อนข้อมูลเพื่อให้ตรงกับ

— Cloudkiller

3

@BoltClock ล่าช้า แต่ความปรารถนาสำหรับ:not([attr],[attr])รูปแบบ CSV เช่นกัน :-P

— TylerH

3

@Cloudkiller ไม่ว่าจะเลือกอิลิเมนต์อินพุตใด - - "อินพุตโดยไม่มีคลาส c1 หรืออินพุตโดยไม่มีคลาส c2"

— David Callanan

48

หากคุณกำลังใช้ SASS ในโครงการของคุณฉันได้สร้างมิกซ์นี้ขึ้นมาเพื่อให้มันทำงานได้อย่างที่เราต้องการ

@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 วิธี:

ตัวเลือกที่ 1: แสดงรายการที่ถูกละเว้นแบบอินไลน์

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

ตัวเลือกที่ 2: รายการที่ถูกละเว้นในตัวแปรก่อน

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

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

เอาต์พุต CSS สำหรับตัวเลือกใดตัวเลือกหนึ่ง

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

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

— Daniel Tonon
แหล่งที่มา

6

ไม่ได้เป็นเช่นนั้นขอให้คนตัดไม้ไปที่ร้านฮาร์ดแวร์แทนรับไม้ของเขา?

— osirisgothra

อะไร? ดังนั้นคุณควรจะเขียน. selector: not (.one): not (.two): not (.three): not (.four) {... } มากกว่า. selector {@ รวมไม่ ('หนึ่ง', ' .two ','. สาม ','. สี่ ') {... }}?

— Daniel Tonon

2

ในแง่ของประสิทธิภาพ: ใช่ ลดจำนวน'ตัวอักษรและ IMO ให้มีประสิทธิภาพยิ่งขึ้น

— Daan

:not()= 6 ตัวอักษรต่อรายการ '',= 3 ตัวอักษรต่อรายการ @includeควรกำหนดให้กับปุ่มลัดดังนั้นฉันจะนับว่าเป็นหนึ่งอักขระ (ในแง่ของการพิมพ์) ในทางเทคนิคแล้วฉันไม่คิดว่าคุณจะต้องใช้เครื่องหมายคำพูดเดียวในรายการถ้าคุณเกลียดพวกเขามาก พวกเขาช่วยป้องกันไม่ให้บรรณาธิการออกนอกลู่นอกทาง จากนั้นฉันก็ยังคิดว่าวิธีการของฉันเป็นวิธีการเขียนที่มีประสิทธิภาพมากขึ้น

— Daniel Tonon

2

@DananHeskes ยังเขียนทุกกรณี: not () ไม่อนุญาตให้คุณใช้ตัวแปรเพื่อแสดงรายการ

— plong0

30

เริ่มจาก CSS Selectors 4 โดยใช้อาร์กิวเมนต์หลายตัวใน:notตัวเลือกจะเป็นไปได้ ( ดูที่นี่ )

ใน CSS3: ตัวเลือกไม่อนุญาตให้ 1 ตัวเลือกเป็นอาร์กิวเมนต์เท่านั้น ในตัวเลือกระดับ 4 สามารถใช้รายการตัวเลือกเป็นอาร์กิวเมนต์ได้

ตัวอย่าง:

/* 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;
}

แต่น่าเสียดายที่การสนับสนุนเบราว์เซอร์จำกัด สำหรับตอนนี้ใช้งานได้ใน Safari เท่านั้น

— ปีเตอร์มีเรส
แหล่งที่มา

3

ตามcaniuse.comก็ยังคงได้รับการสนับสนุนโดยเฉพาะซาฟารี

— slanden

8

โปรดจำไว้ว่า CSS Selectors ระดับ 4 ไม่ใช่ CSS 4 ไม่มีสิ่งเช่น CSS 4 และอาจไม่มีอยู่จริง

— Edu Ruiz

8

ฉันมีปัญหากับสิ่งนี้และวิธี "X: ไม่ (): ไม่ใช่ ()" ไม่ได้ผลสำหรับฉัน

ฉันสิ้นสุดการใช้กลยุทธ์นี้:

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

มันเกือบจะไม่สนุกเท่าไหร่ แต่มันก็ใช้ได้ผลสำหรับฉันเมื่อ: ไม่ใช่ () กำลังซุกซน มันไม่เหมาะ แต่ก็มั่นคง

— eatCasserole
แหล่งที่มา

5

หากคุณติดตั้งปลั๊กอิน "cssnext" โพสต์ CSSคุณสามารถเริ่มใช้งานไวยากรณ์ที่คุณต้องการใช้ได้ทันที

การใช้ cssnext จะทำให้สิ่งนี้:

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

เป็นนี้

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

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

— Daniel Tonon
แหล่งที่มา