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

希望有所帮助：）

Answer 3

试试这个

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

Answer 4

您需要在各自的完整限定路径中用逗号（，）分隔选择器，否则它将无效：

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

Answer 5

你可以在一行中完成，但它将是两个选择器。试试这个：

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

此外，在选择ID时尝试使用#，这是选择它们的正确方法。

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

5 个答案: