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个功能：嵌套和混合。

两个父母与同一个孩子css

2 个答案: