Bộ chọn loại đầu vào CSS - Có thể có cú pháp “hoặc” hoặc “không”?

Nếu chúng tồn tại trong lập trình),

Nếu tôi có biểu mẫu HTML với các đầu vào sau:

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

Tôi muốn áp dụng một kiểu cho tất cả các đầu vào là type="text"hoặc type="password".

Ngoài ra, tôi sẽ giải quyết cho tất cả các đầu vào ở đâu type != "checkbox".

Có vẻ như tôi phải làm điều này:

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

Không có cách nào để làm:

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

hoặc là

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

Tôi đã xem xét xung quanh và có vẻ như không có cách nào để làm điều này với một bộ chọn CSS duy nhất.

Tất nhiên không phải là vấn đề lớn, nhưng tôi chỉ là một con mèo tò mò.

Bất kỳ ý tưởng?

CSS3 có một lớp giả được gọi là : 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>

Nhiều bộ chọn

Như Vincent đã đề cập, có thể xâu chuỗi nhiều :not()s lại với nhau:

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

CSS4, chưa được hỗ trợ rộng rãi , cho phép nhiều bộ chọn trong một:not()

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

Hỗ trợ kế thừa

Tất cả các trình duyệt hiện đại đều hỗ trợ cú pháp CSS3. Tại thời điểm câu hỏi này được đặt ra, chúng tôi cần dự phòng cho IE7 và IE8. Một lựa chọn là sử dụng một polyfill như IE9.js . Một cách khác là khai thác tầng trong 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
}

Đó là cách chính xác để làm điều đó. Đáng buồn thay, CSS không phải là một ngôn ngữ lập trình.