Наследовать класс CSS

Ответ 1

CSS-классы не являются классами ООП. Наследование работает наоборот.
Элемент DOM может иметь много классов, напрямую или унаследованных или связанных друг с другом, которые будут применяться по порядку, переопределяя ранее определенные свойства:

<div class="foo bar">

.foo {
    color: blue;
    width: 200px;
}

.bar {
    color: red;
}

Div будет шириной 200 пикселей и будет иметь красный цвет.

Вы переопределяете свойства элементов DOM с разными классами, а не свойствами классов CSS. Классы CSS "являются наборами правил, так же как идентификаторы или теги могут использоваться в качестве наборов правил.

Обратите внимание, что порядок, в котором применяются классы, зависит от приоритета и специфичности селектора, который является достаточно сложной темой сам по себе.

Ответ 2

Как уже упоминалось, в CSS нет концепции наследования ООП. Но я всегда использовал для этого работу.

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

/*button specific attributes*/
.button1 {
    background-image: url("../Images/button1.gif");
}
/*button specific attributes*/
.button2 {
    background-image: url("../Images/button2.gif");
}

/*These are the shared attributes */
.button1, .button2 {
    cursor: pointer;
    background-repeat: no-repeat;
    width: 25px;
    height: 20px;
    border: 0;
}

Надеюсь, это поможет кому-то.

Ответ 3

Вы можете создать другой класс с требуемыми свойствами и добавить этот класс в свой атрибут класса:

.classA
{
  margin: 0;
  text-align: left;
}

.classB
{
  background-color: Gray;
  border: 1px solid black;
}

<div class="classA classB">My div</div>

Ответ 4

Вы не наследуете css, вы просто добавляете еще один класс к элементу, который переопределяет значения

.base{    
  color:green;
  ...other props
}

.basealt{
   color:red;
}

<span class="base basealt"></span>

Ответ 5

Я думаю, вы можете использовать более одного класса в теге

например:

<div class="whatever base"></div>
<div class="whatever2 base"></div>

поэтому, когда вы хотите использовать весь цвет div, вы можете просто изменить .base

... я не знаю, как наследовать CSS

Ответ 6

Что-то вроде этого:

.base {
    width:100px;
}

div.child {
    background-color:red;
    color:blue;
}

.child {
    background-color:yellow;
}

<div class="base child">
    hello world
</div>

Фон здесь будет красным, так как селектор css более конкретный, так как мы сказали, что он тоже должен принадлежать элементу div!

см. здесь в действии: jsFiddle

Ответ 7

Как сказано в предыдущих ответах, они не являются ООП-подобным наследованием в CSS. Но если вы хотите повторно использовать набор правил, чтобы применить его к потокам чего-то, изменив свойства, а если вы можете использовать LESS, попробуйте Mixins, Чтобы возобновить функции OOP, это выглядит как composition.

Например, вы хотите применить класс .paragraph, который находится в файле "text.less" для всех p файлов абзацаContainer, и переопределить свойство цвета от красного до черного

text.less файл

.paragraph {
    font: arial;
    color: red
}

Сделайте это в файле alternText.less

@import (reference) 'text.less';    
div#paragraphsContainer > p {
    .paragraph;
    color: black
}

файл your.html

<div id='paragraphsContainer'>
   <p>paragraph 1</p>
   <p>paragraph 2</p>
   <p>paragraph 3</p>
</div>

Прочитайте этот ответ об определении того же свойства css несколько раз

Ответ 8

Вы также можете использовать важную функцию css, чтобы сделать качества, которые вы не хотите переопределять в исходном классе. Я использую это на своем сайте, чтобы сохранить некоторые основные характеристики исходного класса, переопределяя другие:

<div class="foo bar">
.foo {
color: blue;
width: 200px  !important;
}

.bar {
color: red;
width: 400px;
}

Это создаст элемент класса "foo bar", красный и 200px. Это здорово, если вы используете два других класса по отдельности и просто хотите получить кусок от каждого класса.