css - 有同一个孩子的两个父母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有两个孩子的父母在哪里。

标签： csscss-selectors

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