两个父母有相同的孩子css

Question

令我惊讶的是，这还没有出现过。通常，在我设计网站样式时，我有两个父母的孩子是同一类型，例如：

form#login-form

和

form#reset-form

并且在每个这些父母中，给孩子造型：

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是有两个孩子的父母。

Answer 1

只需将通用类添加到所有输入字段示例-

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

Answer 2

SASS就像类固醇上的CSS。只需搜索“ SASS CSS”。也就是说，最佳实践是使用NPM + Webpack ...值得学习。使用SASS，您可以执行以下操作：

@mixin myinputbuttonstyles {
width: 14.75em;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    border: none;
}

form#login-form, form#reset-form {

input[type="submit"] {
@include myinputbuttonstyles; 
}

}

此示例显示SASS的2个功能：嵌套和混合。