Как работает наследование css?

Question

Я хочу создать различные стили кнопок, которые должны, например, отличаться только цветом. Поэтому я подумал, что создаю базовый класс css для кнопки и наследую их и просто переопределяю цвет (по крайней мере, это будет мой подход с точки зрения Java ...).

.myButton { 
    padding:... 
    width:... 
    background: white; 
} 

.myButton-ok { 
    background: green; 
} 

.myButton-warn { 
background: orange; 
} 

Но как я могу сделать эти классы продлить .myButton класс, так что я только должен применяться, например, .myButton-ok и все другие стили базовой кнопки поддерживаются?

Answer 1

Добавить дополнительный класс, чтобы кнопка вступила в силу. Что-то вроде этого:

.myButton { 
padding:... 
width:... 
background: white; 
} 

.red { 
background: red; 
} 

.blue { 
background: blue; 
} 

<button Class="myButton">Button</button> // basic button 
<button Class="myButton red">Button</button> // with red BG 
<button Class="myButton blue">Button</button> // with blue BG 

Answer 2

CSS не работает так. Он не использует наследование perse ... он использует каскад, основанный на специфичности селектора для переопределения свойств. Единственный способ сделать это - использовать препроцессор как LESS или SASS, где вы могли бы расширить их.

С raw css я бы назначил два класса кнопке со стилями по умолчанию, а затем кнопкой со специфическими стилями.

<a class="myButton myButton-ok"></a> 

Answer 3

В Css вы не можете так поступать.

Однако, в этом типе ситуаций, мы можем достичь же путем выделения общих свойств и специфические свойства, как показано ниже:

.myButton, myButton-ok, myButton-warn { 
    padding:... 
    width:...; 
    /*Other common properties, except specific ones like "background"*/ 
} 

.myButton-ok { 
    background: green; 
} 

.myButton-warn { 
background: orange; 
} 

Answer 4

В CSS «сила» порядок таков:

встроенного стиля > class> id.

Таким образом, можно определить кнопку общего класса:

.myButton { 
padding:... 
width:..}; 

и для кнопки OK можно определить встроенный стиль (в HTML):

style="background:green" 

в качестве альтернативы, вы всегда можете определить конкретный id для каждой кнопки, но для просто изменения цвета я думаю, что он переполнен:

#myButton-ok{ background: green}; 

Answer 5

0 не имеет понятия класса или наследования в смысле программирования. В нем есть только селектор классов, который позволяет вам указывать свойства для элементов с определенным атрибутом class (предмет HTML) и имеет наследование в совершенно ином смысле: при определенных условиях элемент наследует значения свойств из своего родителя в дереве документов (и это не имеет ничего общего с классами).

Таким образом, нам нужно думать по-другому. В примере вашего примера вы можете использовать, например,

.myButton { 
    padding:... 
    width:... 
    background: white; 
} 

.ok { 
    background: green; 
} 

.warn { 
    background: orange; 
} 

и разметка как <button class="button warn">. Это означало бы, что элемент принадлежит к двум классам и имеет декларации для обоих из них. Здесь становится актуальным, что при прочих равных условиях, если к элементу применяются два объявления для одного и того же свойства, выигрывает последнее объявление (т. Е. Тот, который появляется позже в таблицах стилей).