Как повторно использовать и переопределять стиль Css?

нормально, вот myResource.cssКак повторно использовать и переопределять стиль Css?

 
.gwtCellButton button { 
    margin: 0; 
    padding: 5px 7px; 
    text-decoration: none; 
    ....more styles here... 

} 

.gwtCellButton button:active { 
    border: 1px inset #ccc; 
} 
.gwtCellButton button:hover { 
    border-color: orange; 
    color: orange; 
}

Теперь я хочу, чтобы иметь .gwtCellButtonSmall это так же, как .gwtCellButton кроме того, что он имеет padding: 1px 2px;

Ofcourse если я делать так, то я могу дублировать код:

 
.gwtCellButtonSmall button { 
    margin: 0; 
    padding: 1px 2px; 
    text-decoration: none; 
    ....more styles here... 

} 

.gwtCellButtonSmall button:active { 
    border: 1px inset #ccc; 
} 
.gwtCellButtonSmall button:hover { 
    border-color: orange; 
    color: orange; 
}

источник

2014-02-10 Tum

Если я правильно понял ваш вопрос, вы хотите иметь два элемента с похожими стилями с одним, имеющим разные padding.

так, вы можете поделиться стили между двумя элементами:

.gwtCellButton button, .gwtCellButtonSmall button{ 
    margin: 0; 
    padding: 5px 7px; 
    text-decoration: none; 
    ... 
}

Затем используйте !important переопределить padding для конкретного элемента:

.gwtCellButtonSmall button{ 
    padding: 1px 2px !important 
}

Или вы могли бы использовать что-то вроде Sass.

источник

2014-02-10 00:15:09 Charlie

это хорошо работает – Tum

Нет необходимости использовать «! Important», если вы убедитесь, что вы поставили более конкретный селектор под более общим селектором. –

@JohnSlegers Okay – Charlie

!important. Свойство, которое имеет !important, переопределяет свойство точно, если оно есть.

Так что ваш случай,

padding: 1px 2px!important;

Крупные их использование вызывает у вас какие-то проблемы иногда. Таким образом, не забудьте также быстро взглянуть на this summary.

источник

2014-02-10 00:25:09 Zafar

но как повторно использовать? – Kiti

Нет необходимости использовать «! Important», если вы убедитесь, что вы установите более конкретный селектор под более общий селектор. –

Вам не нужно дублировать код или, что еще хуже, использовать !important.

Эта проблема может быть решена за счет использования классов-модификаторов, указав два класса на каждом элементе HTML: базовый gwtCellButton класса и класса модификатора (regular и small в этом примере).

.gwtCellButton button { 
    margin: 0; 
    text-decoration: none; 
} 

.gwtCellButton.regular button { 
    padding: 5px 7px; 
} 

.gwtCellButton.small button { 
    padding: 1px 2px; 
}

Использование !important декларации без необходимости может привести к specificity issues вниз линии.

источник

2014-02-10 00:42:14 mmwtsn

Как повторно использовать и переопределять стиль Css?

ответ

Смежные вопросы