Как получить доступ к двум идентификаторам в одном селекторе css

У меня есть div, который имеет три кнопки, как

<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>

Я задал свой стиль. Я хочу, чтобы кнопка добавления и отмены имела свой левый край: 5 пикселей; Сейчас я делаю это таким образом,

#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;
}

Я хочу сделать это в одной строке. Я пробовал это, но он не работал, и он также удаляет маркер кнопки отмены.

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

В любом случае, я могу достичь стиля в одной строке?

Спасибо

Ответы

Ответ 1

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

это работает для вас?

или просто:

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

С разделением , вы начинаете полный новый CSS-селектор и объединяете их.

Ответ 2

Лучшая практика: Просто поместите все id/class и разделите их запятыми (,) затем вставьте свой собственный стиль на свое тело.

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

Надеюсь, это поможет:)

Ответ 3

попробуйте это

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

Ответ 4

Вам нужно отделить селектор через запятую (,) по их соответствующим полным пути, иначе это не сработает:

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

Ответ 5

Вы можете сделать это в одной строке, но это будут два селектора. Попробуйте следующее:

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

Кроме того, попробуйте использовать # при выборе id, это правильный способ их выбора.