¿Cómo acceder a dos ID en un selector CSS

tengo div que tiene tres botones como,¿Cómo acceder a dos ID en un selector CSS

<div id="buttons"> 
    <input id="preview" class="ButtonStyle" type="submit" value="Preview" name="preview"> 
    <input id="add" class="ButtonStyle" type="submit" value="Save" name="add"> 
    <input id="Cancel" class="ButtonStyle" type="submit" value="Cancel" name="Cancel"> 
</div>

que establezca su estilo. Quiero que tanto el botón de agregar como el de cancelar tengan su margen izquierdo: 5px; En este momento lo estoy haciendo de esta manera,

#outboxmidpg #buttons input[type="submit"]{ 
    font-weight: bold; 
    width: 70px; 
} 

#outboxmidpg #buttons input[id="Cancel"] { 
    margin-left: 5px; 
} 

#outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

Quiero hacerlo en una línea. Intenté esto, pero no funcionó y también quita el margen del botón cancelar.

#outboxmidpg #buttons input[id="Cancel"] input[id="add"] { 
    margin-left: 5px; 
}

¿Hay alguna forma de que pueda lograr el estilo en una línea?

Gracias

Fuente

2012-03-28 Basit

#buttons input:nth-child(2), #buttons input:nth-child(3){ 
    margin-left:5px; 
}

¿esto funciona para usted?

o simplemente:

#Cancel, #add{ 
    margin-left:5px; 
}

Con , separación se inicia un nuevo selector completa CSS y combinarlos.

Fuente

2012-03-28 06:39:53

Oh, eso es bueno. Sí, el primero funciona, pero ¿por qué preguntas esto? ¿No es común? Usé el primero porque es nuevo para mí. Usted está seleccionando niños. Luce bien :) Pero, por favor, ¿cuál es mejor o solo es cuestión de estilo o preferencia? Gracias – Basit

Deberías quedarte con la segunda versión, porque los navegadores antiguos y también las nuevas versiones de Internet Explorer NO son compatibles con nth-child !! Solo quería saber si funciona ;-). –

Oh, pero ¿por qué los navegadores no son compatibles con enésimo hijo? ¿Tienen alguna razón válida para ello? Preguntar sólo por curiosidad :) – Basit

probar esto

#outboxmidpg #buttons input[id="Cancel"], #outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

Fuente

2012-03-28 06:38:38 PraveenVenu

Es necesario separar el selector por una coma (,) en sus respectivos caminos calificados completo, de lo contrario no funcionará:

#outboxmidpg #buttons input[id="Cancel"], 
#outboxmidpg #buttons input[id="add"] { 
    margin-left: 5px; 
}

Fuente

2012-03-28 06:39:02

Puede hacerlo en una línea, pero serán dos selectores. Prueba esto:

#outboxmidpg #buttons input#Cancel, #outboxmidpg #buttons input#add { 
    margin-left: 5px; 
}

Además, trate de usar # la hora de seleccionar los ID, que es la forma correcta para seleccionarlos.

Fuente

2012-03-28 06:40:40 professorsloth

La mejor práctica para hacer es: Simplemente ponga todos los identificadores/clase y sepárelos por comas (,) y luego inserte su estilo personalizado en su cuerpo.

#Button_One, #Button_Two { 
vertical-align: middle; 
    padding-top: 10px; 
    margin-top: 1px; 
}

espero que ayude :)

Fuente

2014-12-11 02:11:06 spongecode

¿Cómo acceder a dos ID en un selector CSS

Respuesta

Cuestiones relacionadas