2010-05-09 28 views
61

Tengo un problema bastante grande, porque necesito anatemizar desde el diseño de algunos tipos de entrada. Tenía algo así como:CSS "y" y "o"

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

Pero no quiero marcar las casillas de verificación también.

He intentado:

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

Cómo utilizar &&? Y necesitaré usar || pronto, y creo que ese uso será el mismo.

Actualización:
Todavía no sé cómo usar || y && correctamente. No pude encontrar nada en los documentos W3.

+11

* "anathematise" * Yikes. ¿Quieres amenazar a las personas que intentan marcar las casillas de verificación con la retribución divina? (Probablemente quiso decir "exento" o similar, por ejemplo, "Necesito eximir algunos tipos de entrada de una regla de estilo".) –

+2

Bueno, no pude encontrar una buena traducción al verbo compuesto de mi idioma;) – Misiur

+2

Creo @ T.J. Crowder probablemente entendió eso. Pero * fue * gracioso ... particularmente la ironía de su error ortográfico 'divino' = D –

Respuesta

83

&& obras de encordado-juntos varios selectores like-so:

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

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

Otro ejemplo:

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

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

"||" funciona mediante la separación de varios selectores con comas como tan:

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

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

Como nota al margen, yo recomendaría en contra de usar el selector de "no" porque no es compatible con Internet Explorer. Según una encuesta, el 60% de las personas usa alguna versión de Internet Explorer, por lo que su sitio web no funcionará para mucha gente.

+0

Ok, gracias por la luz. Odio el estilo de las formas, pero es mi tarea, y el sitio no es mío. Aplicaré clases a las entradas. – Misiur

+4

Aquí hay un gráfico útil de lo que admite Internet Explorer: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors – geofflee

+4

Quién usa IE ahora :) – Tarun

0

Supongo que odias escribir más selectores y dividirlos por una coma?

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

y por cierto este

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

A mi me parece más como "de entrada que no tiene estos dos tipos" :)

+2

Eso no funcionaría, porque el primer selector seleccionaría todos los "no" de radio, (pero _debería seleccionar el 'checkbox'), y el segundo haría lo contrario. La unión de los dos contendría tanto 'checkbox' _and_' radio'. – Eric

+0

Ese primer ejemplo no && ellos juntos, se disparará para las entradas que no son radios para el primer selector, Y las entradas que no son casillas de verificación, lo que significa todas las entradas :-) –

+0

Estás equivocado. Luego, el primero se aplicará al segundo y el segundo al primero. – Misiur

29

Y (&&):

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

O (||):

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

Nah, falla también. Se aplicará 1 a 2 y 2 a 1 – Misiur

+1

@Misiur: No entiendo. – kennytm

+0

@KennyTM: Mire. El uso de la coma hará algo como esto: .registration_form_right input: not ([type = "radio"]) se aplicará a todo, incluida la casilla de verificación, y .registration_form_right input: not ([type = "checkbox"]) se aplicará a todo, incluso radio – Misiur

3

IE no admite la pseudoclase :not. Me gustaría obtener algo como esto en su lugar:

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

Algunas duplicaciones, pero es un pequeño precio a pagar para una mayor compatibilidad.

+0

Tiene toda la razón. Hovewer, lo mejor es agregar clase a la entrada. – Misiur

0

Por si acaso, si alguien está atascado como yo. Después de revisar la publicación y algo de éxito y prueba , esto funcionó para mí.

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

Puede reproducir el comportamiento de alguna forma de "O" por medio de & y: no.

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

Lo sentimos,: no (: no) no es una sintaxis CSS válida. Sin embargo, funciona con jQuery. –

6

para seleccionar Propiedades a Y b de un elemento de X:

X[a][b] 

para seleccionar Propiedades a O b de un elemento de X:

X[a],X[b]