css - 两个 parent 有相同的 child css

Question

我很惊讶这以前没有出现过。很多时候，当我设计我的网站时，我有两个 parent 有相同类型的 child ，说:

form#login-form

和

form#reset-form

在每个 parent 中，为 child 设计样式:

input[type="submit"]

我必须这样做:

form#login-form input[type="submit"], form#reset-form input[type="submit"] {
    width: 14.75em;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    border: none;
}

当然，在 CSS 中有更简单的方法吗？如果没有，我有这样的代码

.sidebar-outer + *:not(:empty), .sidebar-outer + *:empty + *

其中 .sidebar-outer 是有两个 child 的 parent 。

Answer 1

只需为所有输入字段添加一个公共(public)类示例 -

<form id = "login-form">
  <input class="common-class" type="submit"/>
</form>
<form id = "reset-form">
  <input class="common-class" type="submit"/>
</form>

在 css 类下你可以有下面的 -

.common-class{
    width: 14.75em;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    border: none;
}