CSS Selector“ (A หรือ B) และ C”?

176

สิ่งนี้ควรเรียบง่าย แต่ฉันมีปัญหาในการค้นหาข้อความค้นหา
สมมติว่าฉันมีสิ่งนี้:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

ใน CSS ฉันจะสร้างตัวเลือกที่ตรงกับสิ่งที่ตรงกับ "(.a หรือ .b) และ. c" ได้อย่างไร

ฉันรู้ว่าฉันสามารถทำสิ่งนี้:

.a.c,.b.c {
  /* CSS stuff */
}

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

html css css-selectors

— หยอกเย้า
แหล่งที่มา

ระวังถ้าคุณต้องรองรับ Internet Explorer 6 เพราะมันจะไม่สนใจชื่อคลาสมากกว่าหนึ่งชื่อในตัวเลือก CSS

— fforw

24

โชคดีสำหรับโครงการนี้ฉันสามารถบอกผู้ใช้ IE6 ให้อัพเกรดตัวเองได้

— Josh

12

เพื่อความชัดเจนฉันพยายามใส่บรรทัดใหม่หลังเครื่องหมายจุลภาคหรืออย่างน้อยช่องว่าง

— ตอบ

2

@ANeves +1 สำหรับบรรทัดใหม่ นี่คือสิ่งที่ดีที่สุดในความคิดของฉันโดยเฉพาะอย่างยิ่งเมื่อใช้การควบคุมแหล่งที่มา

— Curt

149

มีไวยากรณ์ที่ดีขึ้นหรือไม่

ไม่orตัวดำเนินการของ CSS ( ,) ไม่อนุญาตการจัดกลุ่ม .a.c,.b.cมันเป็นหลักต่ำสุดความสำคัญผู้ประกอบการในเชิงตรรกะเตอร์ดังนั้นคุณจะต้องใช้

— แมตต์บอล
แหล่งที่มา

25

ยังไม่ได้ แต่มี:matches()ฟังก์ชั่นหลอกระดับทดลองที่ทำแค่นั้น:

:matches(.a .b) .c {
  /* stuff goes here */
}

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับมันที่นี่และที่นี่ ปัจจุบันเบราว์เซอร์ส่วนใหญ่สนับสนุนรุ่นเริ่มต้นของมัน:any()ซึ่งทำงานในลักษณะเดียวกัน :matches()แต่จะถูกแทนที่ด้วย เราแค่ต้องรออีกนิดหน่อยก่อนที่จะใช้มันทุกที่ (ฉันจะ)

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

มันไม่มีเหตุผลที่จะตำหนิ IE สำหรับการไม่ใช้สิ่งที่พวกเขาไม่เคยคิดและไม่ได้อยู่ในร่างใด ๆ ที่จะเริ่มต้นด้วย :-moz-any()และ:-webkit-any()ปรากฏตัวขึ้นมานานก่อนที่ Mozilla จะแนะนำให้ใช้กับ Selectors 4 (นำไปสู่การจุติจุติเป็น:matches())

— BoltClock

1

มันไม่สมเหตุสมผลเท่า ๆ กันที่คาดว่าผู้ขายรายใดจะใช้คุณลักษณะจากแบบร่างที่ไม่เสถียรไม่ว่าจะใช้งานแบบร่างนานแค่ไหน (นี่เป็นเพราะความจริงที่ว่า Selectors 4 ยังคงไม่เสถียร .

— BoltClock

@BoltClock พวกเขาโทษ IE6 เป็นเวลาสิบปีแล้วสำหรับสิ่งที่ไม่มีอยู่ในปี 2001 ผู้คนแค่ต้องการตำหนิใครบางคน

— ฟรี

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

— Alexey Shevelyov

ฉันเป็นคนเดียวที่ได้รับUncaught DOMException: Failed to execute 'querySelector' on 'Document': ':any(.a .b)' is not a valid selector.ข้อผิดพลาดหรือไม่? 🤔

— thomas

12

หากคุณมีสิ่งนี้:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

และคุณต้องการเลือกองค์ประกอบที่มี.xและ ( .aหรือ.b) คุณสามารถเขียน:

.x:not(.c) { ... }

แต่ก็สะดวกเมื่อคุณมี "sub-classes" สามรายการและคุณต้องการเลือกสองรายการ

การเลือกคลาสย่อยเดียวเท่านั้น (เช่น.a):.a.x

การเลือกสองคลาสย่อย (ตัวอย่าง.aและ.b):.x:not(.c)

การเลือกคลาสย่อยทั้งสามคลาส: .x

— Šime Vidas
แหล่งที่มา

6

ส่วนคำสั่งแบบตรรกะใด ๆ ของแบบฟอร์มa or b or c or dนั้นเหมือนกันnot(not(a) and not(b) and not(c) and not(d))ดังนั้น 'หรือ' จึงเป็นเพียงฟังก์ชั่นอำนวยความสะดวก ในทางทฤษฎีมันควรจะเป็นไปได้ที่จะได้รับโดยไม่ได้ในทุกกรณี ในกรณีของ OP (.a or .b) and .c->:not(:not(.a):not(.b)).c

— Max Murphy

2

@ MaxMurphy คุณได้ทำการทดสอบสิ่งนี้แล้วหรือยัง?

— Šime Vidas

4

เมื่อห้าโมงเช้านี้! ฉันมี js ที่ spits :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]ออกตรรกะสั่งซื้อครั้งแรกกับตัวเลือกที่ใบให้ผลเช่น รหัสนี้ไม่สะอาดพอสำหรับการอ่านต่อสาธารณะ ฉันทดสอบกับโครเมี่ยมซาฟารีและโทรศัพท์ Android ระดับต่ำ

— Max Murphy

2

@ MaxMurphy คุณมีจุดที่ดี แต่ฉันคิดว่าคุณเรียกใช้คำจำกัดความที่ค่อนข้างทรมานของ "ฟังก์ชั่นอำนวยความสะดวก" ทุกสิ่งที่คอมพิวเตอร์ดิจิทัลสามารถแบ่งย่อยเป็นประตู NAND ได้ แต่ฉันจะไม่เรียกส่วนที่เหลือของวิศวกรรมซอฟต์แวร์ว่า "ฟังก์ชั่นอำนวยความสะดวกมากมาย" ความแตกต่างของการศึกษาระดับปริญญาอย่างรวดเร็วกลายเป็นความแตกต่างโดยพฤตินัยชนิดเมื่อสร้างสามารถรวม

— Sarah G

1

@ MaxMurphy ฉันมีเวลายากที่จะเข้าใจว่าคุณแค่ล้อเล่น :( ปฏิเสธ CSS หลอกชั้น: ไม่ได้ (X) เป็นสัญกรณ์การทำงานการเลือกง่าย X เป็นอาร์กิวเมนต์มันตรงกับองค์ประกอบที่ไม่ได้แสดงโดยอาร์กิวเมนต์ X.. ไม่ต้องมีตัวเลือกการปฏิเสธอีก . (จากMozilla เอกสาร , การเน้นของฉัน)

— törzsmókus

5

ไม่ CSS มาตรฐานไม่ได้ให้ชนิดของสิ่งที่คุณกำลังมองหา

แต่คุณอาจต้องการที่จะดูเป็นน้อยและSASS

เหล่านี้เป็นสองโครงการที่มีวัตถุประสงค์เพื่อขยายไวยากรณ์ CSS เริ่มต้นโดยการแนะนำคุณสมบัติเพิ่มเติมรวมถึงตัวแปรกฎที่ซ้อนกันและการปรับปรุงอื่น ๆ

พวกเขาอนุญาตให้คุณเขียนโค้ด CSS ที่มีโครงสร้างมากขึ้นและทั้งสองอย่างนี้จะแก้ปัญหากรณีการใช้งานของคุณโดยเฉพาะ

แน่นอนว่าไม่มีเบราว์เซอร์ใดที่สนับสนุนไวยากรณ์เพิ่มเติมของพวกเขา (โดยเฉพาะอย่างยิ่งเนื่องจากทั้งสองโครงการมีไวยากรณ์และคุณสมบัติที่แตกต่างกัน) แต่สิ่งที่พวกเขาทำคือจัดเตรียม "คอมไพเลอร์" ซึ่งจะแปลง LESS หรือ SASS code ของคุณให้เป็นมาตรฐาน CSS ปรับใช้บนไซต์ของคุณ

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

ณ จุดนี้ฉันก็อาจใช้การพิมพ์ PHP "Content-type: text / css"

— Josh