CSS “and” and “or”

问题:

I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:

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

But i don't want to style checkboxes too.

I've tried:

.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"]) 

How to use &&? And I'll need to use || soon, and I think that usage will be same.

Update:
I still don't know how to use || and && correctly. I couldn't find anything in W3 docs.

回答1:

&& works by stringing-together multiple selectors like-so:

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

Another example:

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

|| works by separating multiple selectors with commas like-so:

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

回答2:

AND (&&):

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

OR (||):

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

回答3:

To select properties a AND b of a X element:

X[a][b] 

To select properties a OR b of a X element:

X[a],X[b] 

回答4:

The :not pseudo-class is not supported by IE. I'd got for something like this instead:

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

Some duplication there, but it's a small price to pay for higher compatibility.

回答5:

I guess you hate to write more selectors and divide them by a comma?

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

and BTW this

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

looks to me more like "input which does not have both these types" :)

回答6:

Just in case if any one is stuck like me. After going though the post and some hit and trial this worked for me.

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

回答7:

You can somehow reproduce the behavior of "OR" using & and :not.

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

文章来源: CSS “and” and “or”