如何在一个css选择器中访问两个ID

Question

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

我设定了它的风格.我想要添加和取消按钮都有左边距:5px; 现在我这样做,

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

无论如何,我能在一条线上实现这种风格吗？

谢谢

Answer 1

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

这对你有用吗？

或者干脆:

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

通过,分离,您可以启动一个完整的新CSS选择器并将它们组合起来.

Answer 2

最佳做法是：只需放置所有 id/class 并用逗号 (,) 分隔它们，然后在其主体上插入您的自定义样式。

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

希望能帮助到你 ：）