ฉันสามารถเขียน CSS selector การเลือกองค์ประกอบที่ไม่มีคลาสหรือคุณสมบัติที่แน่นอนได้หรือไม่?

644

ฉันต้องการเขียนกฎตัวเลือก CSS ที่เลือกองค์ประกอบทั้งหมดที่ไม่มีคลาสที่แน่นอน ตัวอย่างเช่นกำหนด HTML ต่อไปนี้:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

ผมอยากจะเขียนตัวเลือกที่เลือกองค์ประกอบทั้งหมดที่ไม่ได้มีคลาส "พิมพ์" ซึ่งในกรณีนี้เป็นnavและองค์ประกอบ

เป็นไปได้ไหม

หมายเหตุ: ใน HTML จริงที่ฉันต้องการใช้นี้จะมีองค์ประกอบมากมายที่ไม่มีคลาส "ที่พิมพ์ได้" มากกว่าที่จะทำ (ฉันรู้ว่ามันเป็นอีกวิธีหนึ่งในตัวอย่างด้านบน)

html css css-selectors

— David Nordvall
แหล่งที่มา

897

โดยทั่วไปแล้วคุณจะเพิ่มตัวเลือกคลาสให้กับ:not()คลาสหลอกโดยทำดังนี้

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

แต่ถ้าคุณต้องการการสนับสนุนเบราว์เซอร์ที่ดีกว่า (IE8 และรุ่นเก่าไม่สนับสนุน:not()) คุณอาจจะดีกว่าการสร้างกฎสไตล์สำหรับองค์ประกอบที่ทำมีคลาส "พิมพ์" หากแม้จะไม่เป็นไปได้แม้จะมีสิ่งที่คุณพูดเกี่ยวกับมาร์กอัปที่แท้จริงของคุณคุณอาจต้องทำงานมาร์กอัปของคุณเกี่ยวกับข้อ จำกัด นั้น

โปรดจำไว้ว่าขึ้นอยู่กับคุณสมบัติที่คุณกำหนดไว้ในกฎนี้บางส่วนอาจสืบทอดมาจากลูกหลานที่มี .printableหรือส่งผลกระทบต่อพวกเขาไม่ทางใดก็ทางหนึ่ง ตัวอย่างเช่นแม้ว่าdisplayจะไม่ได้รับการสืบทอดการตั้งค่าdisplay: nonea :not(.printable)จะป้องกันไม่ให้มันและลูกหลานทั้งหมดของมันแสดงผลเนื่องจากมันจะลบองค์ประกอบและทรีย่อยของมันออกจากโครงร่างอย่างสมบูรณ์ คุณสามารถหลีกเลี่ยงปัญหานี้ได้โดยการใช้visibility: hiddenแทนซึ่งจะทำให้ลูกหลานมองเห็นได้ แต่องค์ประกอบที่ซ่อนอยู่จะยังคงส่งผลต่อเค้าโครงเหมือนเดิม ในระยะสั้นแค่ระวัง

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

4

เนื่องจากข้อมูลเล็ก ๆ น้อย ๆ การสนับสนุนเบราว์เซอร์สำหรับลักษณะที่ไม่เชื่อเรื่องสื่อของ CSS มักจะเหมือนกันในทุกประเภทสื่อ - หากเบราว์เซอร์ไม่รองรับ:not()บนหน้าจอก็ไม่รองรับการพิมพ์

— BoltClock

19

โปรดทราบว่า:not()ใช้ตัวเลือกอย่างง่ายเท่านั้นซึ่งหมายความว่าจะไม่มีตัวเลือกที่ซ้อนกันเช่น:not(div .printable)- ดูไวยากรณ์ของ W3C Selector

— Steve Eynon

1

ฉันเพิ่งลองใช้งาน. a: ไม่ (. ใช้งาน a) ไม่ทำงานสำหรับฉัน แต่: ไม่ (. ใช้งาน) ทำ!

— user2367418

เมื่อคุณบอกว่ามันไม่ได้ผลสำหรับคุณคุณอาจหมายถึงว่ามันไม่ได้ผลสำหรับคุณใช่ไหม? ไม่ได้หมายความว่ามันใช้งานไม่ได้อาจเป็นกรณีของความจำเพาะ - คุณสมบัติใน:not(.active)กฎของคุณอาจถูกทับด้วยคุณสมบัติในกฎที่มีลำดับความสำคัญสูงกว่า

— พฤศจิกายน

1

@Kilves: คุณแน่ใจหรือไม่ ความจำเพาะของ:not()เป็นที่ของการโต้แย้งซึ่งหมายถึง:not(div)เป็นอย่างเท่าเทียมกันที่เฉพาะเจาะจงเพื่อdiv, :not(.cls)การ.clsและการ:not(#id) #id

— BoltClock

179

:not([class])

ที่จริงแล้วสิ่งนี้จะเลือกสิ่งที่ไม่มีคลาส css ( class="css-selector") ที่ใช้กับมัน

ฉันสาธิตjsfiddle

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}

    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

ขยายตัวอย่างข้อมูล

รองรับสิ่งนี้หรือไม่? ใช่: Caniuse.com (เข้าถึง 02 ม.ค. 2020) :

สนับสนุน: 98.74%
การสนับสนุนบางส่วน: 0.1%
ทั้งหมด: 98.84%

ตลกแก้ไขฉันเป็น Googling ตรงข้ามกับ: ไม่ การปฏิเสธ CSS?

selector[class]  /* the oposite of :not[]*/

— Milche Patern
แหล่งที่มา

109

`:not`ระดับปฏิเสธหลอก

negation CSS pseudo-class, :not(X)เป็นสัญกรณ์การทำงานที่ใช้ตัวเลือก X แบบง่ายเป็นอาร์กิวเมนต์ มันตรงกับองค์ประกอบที่ไม่ได้เป็นตัวแทนของการโต้แย้ง X จะต้องไม่มีตัวเลือกการปฏิเสธอื่น

คุณสามารถใช้:notเพื่อแยกชุดย่อยขององค์ประกอบที่ตรงกันใด ๆ สั่งเช่นเดียวกับตัวเลือก CSS ปกติ

ตัวอย่างง่ายๆ: ไม่รวมตามคลาส

div:not(.class)

จะเลือกdivองค์ประกอบทั้งหมดโดยไม่ต้องเรียน.class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

ขยายตัวอย่างข้อมูล

ตัวอย่างที่ซับซ้อน: ยกเว้นตามประเภท / ลำดับชั้น

:not(div) > div

จะเลือกdivองค์ประกอบทั้งหมดที่ arent เด็กของอีกdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

ขยายตัวอย่างข้อมูล

ตัวอย่างที่ซับซ้อน: ตัวเลือกหลอกเชนเชน

ด้วยข้อยกเว้นที่น่าสังเกตว่าไม่สามารถใช้:notตัวเลือกเชน / รังและองค์ประกอบหลอกคุณสามารถใช้ร่วมกับตัวเลือกหลอกอื่น ๆ

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

ขยายตัวอย่างข้อมูล

การสนับสนุนเบราว์เซอร์ฯลฯ

:notเป็นตัวเลือกระดับ CSS3ข้อยกเว้นหลักในแง่ของการสนับสนุนคือIE9 +

ข้อมูลจำเพาะยังทำให้เป็นจุดที่น่าสนใจ:

:not()หลอกช่วยเตอร์ไร้ประโยชน์ที่จะเขียน ตัวอย่างเช่น:not(*|*)ซึ่งไม่แสดงองค์ประกอบใด ๆ เลยหรือ foo:not(bar)เทียบเท่าfooแต่มีความจำเพาะสูงกว่า

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

3

นั่นเป็นคำตอบที่เป็นเอกสารอย่างดีและเป็นตัวอย่างที่ดี #thumbsup

— Jonathan Bredo Christensen

ตกลงตัวอย่างของคุณ:not(div) > divจะทำงานกับผู้ปกครองโดยตรงเท่านั้น แล้วปู่คนอื่นล่ะ?

— FindOut_Quran

ข้อมูลที่น่ากลัว! สิ่งที่ฉันต้องการ! ขอบคุณ!

— เจมี่

22

ฉันคิดว่าสิ่งนี้ควรใช้งานได้:

:not(.printable)

จาก"เชิงลบเลือก CSS" คำตอบ

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

9

เช่นเดียวกับที่สนับสนุนว่าคำตอบข้างต้นของ: ไม่ () สามารถมีประสิทธิภาพมากในรูปแบบเชิงมุมแทนที่จะสร้างเอฟเฟกต์หรือปรับมุมมอง / DOM

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

ตรวจสอบให้แน่ใจว่าเมื่อโหลดหน้าเว็บของคุณฟิลด์ป้อนข้อมูลจะแสดงเฉพาะสิ่งที่ไม่ถูกต้อง (เส้นขอบสีแดงหรือพื้นหลัง ฯลฯ ) หากมีการเพิ่มข้อมูล (เช่นไม่มีความเก่า) อีกต่อไป แต่ไม่ถูกต้อง

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

7

ตัวอย่าง

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// ความทึบ 0.6 ทั้งหมด "section-" แต่ไม่ใช่ "section-name"

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

2

คุณสามารถใช้:not(.class)ตัวเลือกตามที่กล่าวไว้ก่อนหน้านี้

หากคุณสนใจเกี่ยวกับความเข้ากันได้ของ Internet Explorer ผมขอแนะนำให้คุณใช้http://selectivizr.com/

แต่อย่าลืมเรียกใช้ภายใต้ apache มิฉะนั้นคุณจะไม่เห็นผล

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

3

คุณหมายถึงอะไรเรียกใช้ภายใต้ apache? Selectivizr เป็น lib ส่วนหน้าไม่มีส่วนเกี่ยวข้องกับซอฟต์แวร์เซิร์ฟเวอร์

— Kloar

จะดำเนินการร้องขอ ajax - ที่ไม่ทำงานโดยไม่มีเซิร์ฟเวอร์ http

— MelkorNemesis

2

ใช้`:not()`คลาสหลอก:

สำหรับการเลือกทุกอย่างยกเว้นองค์ประกอบบางอย่าง (หรือองค์ประกอบ) เราสามารถใช้คลาส:not() CSS หลอก :not()ระดับหลอกต้องมีCSSตัวเลือกเป็นอาร์กิวเมนต์ของมัน ตัวเลือกจะใช้สไตล์กับองค์ประกอบทั้งหมดยกเว้นองค์ประกอบที่ระบุไว้เป็นอาร์กิวเมนต์

ตัวอย่าง:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}

<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

ขยายตัวอย่างข้อมูล

เราสามารถเห็นพลังของคลาส pseudo นี้ได้แล้วมันช่วยให้เราปรับจูนเตอร์ของเราได้อย่างสะดวกโดยไม่รวมองค์ประกอบบางอย่าง นอกจากนี้ระดับหลอกนี้เพิ่มความจำเพาะของตัวเลือกที่ ตัวอย่างเช่น:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}

<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

ขยายตัวอย่างข้อมูล

— Willem van der Veen
แหล่งที่มา

0

ถ้าคุณต้องการให้เมนูคลาสเฉพาะมี CSS เฉพาะถ้าไม่มีคลาสล็อกอิน :

body:not(.logged-in) .menu  {
    display: none
}

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

-1

อย่างที่คนอื่นพูดคุณแค่ใส่: ไม่ (.class) สำหรับตัวเลือก CSS ฉันขอแนะนำให้ไปที่ลิงค์นี้มันมีประโยชน์มากตลอดการเดินทางของฉัน: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

คลาส pseudo เชิงลบมีประโยชน์อย่างยิ่ง สมมติว่าฉันต้องการเลือก div ทั้งหมดยกเว้นอันที่มีรหัสของคอนเทนเนอร์ ตัวอย่างด้านบนจะจัดการกับภารกิจนั้นได้อย่างสมบูรณ์แบบ

หรือถ้าฉันต้องการเลือกทุกองค์ประกอบ (ไม่แนะนำ) ยกเว้นแท็กวรรคเราสามารถทำได้:

*:not(p) {
  color: green;
}

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

ฉันสามารถเขียน CSS selector การเลือกองค์ประกอบที่ไม่มีคลาสหรือคุณสมบัติที่แน่นอนได้หรือไม่?

:notระดับปฏิเสธหลอก

ตัวอย่างง่ายๆ: ไม่รวมตามคลาส

ตัวอย่างที่ซับซ้อน: ยกเว้นตามประเภท / ลำดับชั้น

ตัวอย่างที่ซับซ้อน: ตัวเลือกหลอกเชนเชน

การสนับสนุนเบราว์เซอร์ฯลฯ

ใช้:not()คลาสหลอก:

ตัวอย่าง:

`:not`ระดับปฏิเสธหลอก

ใช้`:not()`คลาสหลอก: