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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9902305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:25:43  来源:igfitidea点击:

How to access two Ids in one css selector

css

提问by Basit

I have div which has three buttons as,

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

I set its style. I want that both add and cancel button have their left-margin: 5px; Right now I am doing it in this manner,

我设置了它的风格。我希望添加和取消按钮的左边距为: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;
}

I want to do it in one line. I tried this, but it didn't work and it removes the cancel button margin too.

我想在一行中完成。我试过这个,但它没有用,它也删除了取消按钮的边距。

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

Is there anyway that I can achieve the style in one line?

无论如何,我可以在一行中实现这种风格吗?

Thanks

谢谢

回答by mas-designs

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

does this work for you ?

这对你有用吗?

or simply:

或者干脆:

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

With ,seperation you start a complete new CSS Selector and combine them.

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

回答by spongecode

Best practice to do is: Just put all the id's/class and separate them by commas (,) then insert your custom style on its body.

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

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

Hope it helps :)

希望能帮助到你 :)

回答by PraveenVenu

try this

尝试这个

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

回答by Andreas Wong

You need to separate selector by comma (,) in their respective full qualified paths, otherwise it won't work:

您需要在各自的完全限定路径中用逗号 (,) 分隔选择器,否则将无法工作:

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

回答by professorsloth

You can do it in one line, but it will be two selectors. Try this:

您可以在一行中完成,但它将是两个选择器。尝试这个:

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

Also, try to use #when selecting id's, it's the proper way to select them.

另外,#在选择 id 时尝试使用,这是选择它们的正确方法。