两个父母与相同的孩子 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 个功能：嵌套和混合。