Question

我有像这样的对象的特殊样式

form#sign_in{
    position:relative;
    margin:85px auto 50px auto;
    width:455px;
    background:#fff;
    border:#dfdfdf 1px solid;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

我想将所有sign_in样式应用于除width

之外的其他组件

form#another_sign_in{
    width: 520px;
}

如何从form#sign_in继承它？

Answer 1

您应该为登录表单创建一个默认类（或者如果要将样式应用于每个表单，则通过表单标签选择它们）。然后还制作额外的id或类来指定每个表单的宽度。

.default_sign_in{
    position:relative;
    margin:85px auto 50px auto;
    background:#fff;
    border:#dfdfdf 1px solid;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.big_form{
     width:700px;
}
.small_form{
     width:350px;
}

HTML

<form class="default_sign_in big_form">...</form>

Answer 2

如上所述，制作一个具有这些常见风格的课程。或者没有创建额外的课程：

form#sign_in, form#another_sign_in{
    position:relative;
    margin:85px auto 50px auto;
    background:#fff;
    border:#dfdfdf 1px solid;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

form#sign_in{
    width:455px;
}

form#another_sign_in{
    width: 520px;
}

我建议您查看一些CSS预处理器，例如SASS，您可以在其中创建mixin：

@mixin formStyles($width){
    width:$width;
    position:relative;
    margin:85px auto 50px auto;
    background:#fff;
    border:#dfdfdf 1px solid;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;   
}

并使用它：

form#sign_in{
    @include formStyles(455px);
}

form#another_sign_in{
    @include formStyles(520px);
}

Answer 3

此处无法为同一元素添加两个ID。

您可以为两个表单元素添加相同的类属性，然后再向第二个表单添加一个类。

<强> HTML：

<form class="sign_in">.....</form>
<form class="sign_in another_sign_in">....</form>

<强> CSS：

form.sign_in{
    position:relative;
    margin:85px auto 50px auto;
    width:455px;
    background:#fff;
    border:#dfdfdf 1px solid;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

form.another_sign_in{
width: 520px;
}

从组件继承css样式并在另一个中使用它

3 个答案: