CSS Input Type Selectors - เป็นไปได้ที่จะมีไวยากรณ์“ หรือ” หรือ“ not”?

หากมีอยู่ในการเขียนโปรแกรม)

หากฉันมีรูปแบบ HTML ที่มีอินพุตต่อไปนี้:

<input type="text" />
<input type="password" />
<input type="checkbox" />

ฉันต้องการใช้สไตล์กับอินพุตทั้งหมดที่เป็นtype="text"หรือtype="password".

type != "checkbox"หรือฉันจะชำระทั้งหมดของการป้อนข้อมูลที่

ดูเหมือนว่าฉันต้องทำสิ่งนี้:

input[type='text'], input[type='password']
{
   // my css
}

ไม่มีวิธีทำ:

input[type='text',type='password']
{
   // my css
}

หรือ

input[type!='checkbox']
{
   // my css
}

ฉันมองไปรอบ ๆ และดูเหมือนว่าจะไม่มีวิธีทำสิ่งนี้ด้วยตัวเลือก CSS เดียว

ไม่ใช่เรื่องใหญ่ แต่ฉันเป็นแค่แมวขี้สงสัย

ความคิดใด ๆ ?

CSS3 มีคลาสหลอกที่เรียกว่า: not ()

input:not([type='checkbox']) {    
    visibility: hidden;
}

<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
    	                              
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>    	
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>

ตัวเลือกหลายตัว

ดังที่ Vincent กล่าวถึงมันเป็นไปได้ที่จะรวมหลาย ๆ ตัว:not()เข้าด้วยกัน:

input:not([type='checkbox']):not([type='submit'])

CSS4 ซึ่งยังไม่ได้รับการสนับสนุนอย่างกว้างขวางอนุญาตให้มีตัวเลือกหลายตัวในไฟล์:not()

input:not([type='checkbox'],[type='submit'])

การสนับสนุนแบบดั้งเดิม

เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับไวยากรณ์ CSS3 ในขณะที่ถามคำถามนี้เราจำเป็นต้องถอยกลับสำหรับ IE7 และ IE8 ทางเลือกหนึ่งคือการใช้ polyfill เหมือนIE9.js อีกประการหนึ่งคือการใช้ประโยชน์จากน้ำตกใน CSS:

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
} 

input[type='text'], input[type='password']
{
   // my css
}

นั่นคือวิธีทำที่ถูกต้อง น่าเศร้าที่ CSS ไม่ใช่ภาษาโปรแกรม