我很惊讶以前没有出现过。通常,在我设计网站样式时,我有两个父母的孩子是同一类型,例如:
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
是有两个孩子的父母。
答案 0 :(得分:4)
只需将通用类添加到所有输入字段 示例-
<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;
}
答案 1 :(得分:0)
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个功能:嵌套和混合。