наследует стиль CSS от компонента и использовать его в другом

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 стиля к другому компоненту, за исключением ширины

form#another_sign_in{ 
    width: 520px; 
} 

Как наследовать его от form#sign_in?

Answer 1

вы должны сделать класс по умолчанию для своих форм входа (или выбрать их по тегу формы, если вы хотите применить стиль к каждой форме). Затем также создайте дополнительные идентификаторы или классы для указания ширины для каждой формы.

.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

Добавление двух идентификаторов для одного и того же элемента здесь невозможно.

Вы можете добавить один и тот же атрибут класса для двух элементов формы, а затем добавить еще один класс во вторую форму.

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