CSS“ และ” และ“ หรือ”

114

ฉันมีปัญหาค่อนข้างใหญ่เพราะฉันต้องการกายวิภาคศาสตร์จากการจัดรูปแบบอินพุตบางประเภท ฉันมีสิ่งที่ชอบ:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

แต่ฉันไม่ต้องการจัดรูปแบบช่องทำเครื่องหมายด้วย

ฉันพยายามแล้ว:

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

ใช้&&อย่างไร? และฉันจะต้องใช้||เร็ว ๆ นี้และฉันคิดว่าการใช้งานจะเหมือนเดิม

ปรับปรุง:
ผมก็ยังไม่ทราบวิธีการใช้||และ&&ถูกต้อง ฉันไม่พบสิ่งใดในเอกสาร W3

css css-selectors conditional-operator

— มิซิเออร์
แหล่งที่มา

17

"กายวิภาคศาสตร์" Yikes คุณต้องการคุกคามผู้คนที่พยายามจัดรูปแบบช่องทำเครื่องหมายด้วยการแก้แค้นที่ทรยศหรือไม่? (คุณอาจหมายถึง "ยกเว้น" หรือคล้ายกันเช่น "ฉันจำเป็นต้องยกเว้นอินพุตบางประเภทจากกฎการจัดแต่งทรงผม")

— TJ Crowder

3

ฉันหาคำแปลกริยาวลีจากภาษาของฉันไม่เจอ;)

— Misiur

4

ฉันคิดว่า @TJ Crowder คงเข้าใจแล้ว แต่มันเป็นตลก ... โดยเฉพาะอย่างยิ่งประชดของการสะกดคำผิดของเขาพระเจ้าฯ = D

— เดวิดกล่าวว่าคืนสถานะโมนิก้า

ngram ที่ดีแม้ว่า ; ^)

— ruffin

141

&& ทำงานโดยการรวมตัวเลือกหลายตัวเข้าด้วยกันดังนี้:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

ตัวอย่างอื่น:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| ทำงานโดยการแยกตัวเลือกหลายตัวด้วยเครื่องหมายจุลภาคดังนี้:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

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

1

โอเคขอบคุณสำหรับแสง ฉันเกลียดรูปแบบการจัดแต่งทรงผม แต่มันเป็นหน้าที่ของฉันและไซต์ไม่ใช่ของฉัน ฉันจะใช้คลาสกับอินพุต

— Misiur

5

นี่คือแผนภูมิที่มีประโยชน์สำหรับสิ่งที่ Internet Explorer รองรับ: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors

— geofflee

12

ใครใช้ IE บ้าง :)

— Tarun

2

notดูเหมือนว่าจะใช้งานได้ตั้งแต่ IE9 เป็นต้นไป (ขอบคุณแผนภูมิที่จัดทำโดย @geofflee)

— SharpC

1

เรายังคงกังวลกับการรองรับ IE เวอร์ชันเก่าในปี 2018 หรือไม่? แม้แต่ Microsoft ก็ทำไม่ได้

— ความผิดปกติ

48

และ ( &&):

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

หรือ ( ||):

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

— kenny ™
แหล่งที่มา

ไม่ล้มเหลวเช่นกัน จะใช้ 1 ถึง 2 และ 2 ต่อ 1

— Misiur

@KennyTM: ดูสิ การใช้ลูกน้ำจะทำสิ่งนี้: .registration_form_right input: not ([type = "radio"]) จะใช้กับทุกอย่างรวมถึงช่องทำเครื่องหมายและอินพุต. registration_form_right: not ([type = "checkbox"]) จะใช้กับทุกอย่างรวมถึง วิทยุ

— Misiur

@Misiur: แน่นอน ตัวที่ 2 ใช้สำหรับกรณี "OR" (aka ||) ปรับปรุงเพื่อชี้แจง

— kennytm

1

@Kenny ™: สิ่งที่ Misiur พยายามจะพูดคือ…คุณ "||" ตัวอย่างมีความถูกต้องตามหลักไวยากรณ์ แต่ถ้าคุณทำให้นิพจน์ง่ายขึ้นมันจะกลายเป็นเพียง ".registration_form_right input" เนื่องจากการรวมกันของตัวเลือกทั้งสองรวมถึงอินพุตทั้งหมด

— geofflee

@geo, @Mis: ดูสิคำถามที่ถามว่า "ฉันจะต้องใช้ || เร็ว ๆ นี้" นี่จึงเป็นวิธีสร้างตัวอย่าง||จากตัวอย่าง แน่นอนมันจะกลายเป็น.registration_form_right inputหลังจากที่ความเรียบง่าย แต่สาระสำคัญคือคุณใช้,||เป็น คุณสามารถใช้input:not([type="radio"]), input:not([name="foo"])เป็นตัวอย่างที่ไม่สำคัญ

— kennytm

16

ในการเลือกคุณสมบัติaและbของXองค์ประกอบ:

X[a][b]

ในการเลือกคุณสมบัติaหรือbของXองค์ประกอบ:

X[a],X[b]

— ว้าว
แหล่งที่มา

4

:notหลอกชั้นไม่ได้รับการสนับสนุนจาก IE ฉันได้รับสิ่งนี้แทน:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

การทำสำเนาบางอย่างมี แต่ราคาเพียงเล็กน้อยที่ต้องจ่ายเพื่อความเข้ากันได้ที่สูงขึ้น

— แม็กซ์ Shawabkeh
แหล่งที่มา

2

คุณสามารถทำซ้ำลักษณะการทำงานของ "หรือ" โดยใช้ & และ: not

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

— เสิร์จ Profafilecebook
แหล่งที่มา

2

ขออภัย: not (: not) ไม่ใช่ไวยากรณ์ CSS ที่ถูกต้อง มันทำงานร่วมกับ jQuery แม้ว่า

— Serge Profafilecebook

1

ฉันเดาว่าคุณไม่ชอบที่จะเขียนตัวเลือกมากกว่านี้และหารด้วยลูกน้ำ?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

และ BTW นี้

not([type="radio" && type="checkbox"])

ดูเหมือนฉันมากกว่า "อินพุตที่ไม่มีทั้งสองประเภทนี้" :)

— Jaroslav Záruba
แหล่งที่มา

2

ไม่ได้ผลเพราะตัวเลือกแรกจะเลือกทั้งหมดที่ไม่ใช่radio(แต่จะเลือกตัวเลือกcheckbox) และตัวเลือกที่สองจะทำย้อนกลับ สหภาพของทั้งสองจะมีทั้งและcheckbox radio

— Eric

ตัวอย่างแรกนั้นจะไม่ && เข้าด้วยกันมันจะเริ่มทำงานสำหรับอินพุตที่ไม่ใช่วิทยุสำหรับตัวเลือกแรกและอินพุตที่ไม่ใช่ช่องทำเครื่องหมายซึ่งหมายถึงอินพุตทั้งหมด :-)

— Dan F

คุณผิด. จากนั้นตัวแรกจะใช้กับตัวที่สองและตัวที่สองเป็นตัวแรก

— Misiur

1

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

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

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

1

คำเตือน การร้อยเข้าด้วยกันหลาย ๆnotตัวเลือกตัวเพิ่มความเฉพาะเจาะจงของตัวเลือกที่เป็นผลลัพธ์ซึ่งทำให้ยากต่อการแทนที่: โดยพื้นฐานแล้วคุณจะต้องหาตัวเลือกที่มีเครื่องหมายทั้งหมดและคัดลอกวางลงในตัวเลือกใหม่ของคุณ

not(X or Y)เลือกจะดีที่จะหลีกเลี่ยงการพองจำเพาะ แต่ผมคิดว่าเราจะต้องติดรวมตรงกันข้ามเช่นในคำตอบนี้

— Andrius R.
แหล่งที่มา