Как сделать наследование в CSS? - PullRequest
0 голосов
/ 31 декабря 2018

У меня есть следующая проблема:

У меня есть шрифт с заданным стилем в классе CSS:

.font_arial_36 {
    font-family:Arial;
    font-size:36px;
}

И теперь у меня есть CSS, который дает мне размерdiv в данной ситуации:

.a_div_test {
    width:300px;
    max-width:350px;
}

Я хочу, чтобы a_div_test имел свойства font_arial_36, как наследование .

Что-то вроде (это просто неправильноопубликовать то, что я хотел):

.font_arial_36 {
    font-family:Arial;
    font-size:36px;
}

.a_div_test extends font_arial_36 {
    width:300px;
    max-width:350px;
}

и теперь .a_div_test также должен иметь свойства font_arial_36.

Возможно ли это с помощью css?

PS: я не хочу добавлять несколько классов к элементу Html следующим образом:

<div class="font_arial_36 a_div_test"></div>

Потому что я должен переписать свой код во многих местах, где появляется .a_div_test.

Ответы [ 5 ]

0 голосов
/ 04 января 2019

CSS означает «Каскадные таблицы стилей».Это означает, что элемент верхнего уровня будет каскадно связывать свои стили с дочерними элементами.Пока элементы .a_div_test содержатся в поддереве элементов .font_arial_36, они будут получать (наследовать) все стили от .font_arial_36.

. Именно поэтому вы определяете font-family внутри *Тег 1007 *, если вы хотите, чтобы он применялся ко всем элементам на странице.

То есть наследование определяется структурой HTML, а не самим CSS.

0 голосов
/ 31 декабря 2018

Как подсказывают другие, вы не можете наследовать одно свойство CSS от другого.Единственный способ - добавить оба класса к элементу DOM, чтобы имитировать наследование.Решение Css:

<button class="uiButton disabledButton">Click Here</button>

Для ниже CSS:

.uiButton {
  background-color: gray;
  color: lightgray;
  font-size: 20px;
  font-family: "Segoe UI", Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;

  padding: 10px 10px;
  border:none;
  display: inline-block;
  margin: 5px 5px;
  cursor: pointer;
}

.disabledButton
{
    background-color: gray;
    color: lightgray;
    cursor: not-allowed;
}

Вверху: кнопка сначала стилизована с помощью класса uiButton, а затем - класса disabledButton.Поэтому любой класс CSS, который вы напишете позже в атрибуте 'class', перезапишет свойства более раннего (в случае, если что-то общее).

Но есть лучший способ:

Да, если вы готовы использовать препроцессоры CSS, такие как https://sass -lang.com / guide

Обратите внимание, что Sass - это препроцессор.Это означает, что файл Sass (.scss) будет скомпилирован в CSS (но chrome обеспечивает хорошую отладку для .scss, то есть файла Sass).Вы можете написать простой CSS в файле SCSS и дополнительно использовать директивы для достижения наследования и многое другое.Чтобы упростить жизнь, есть программное обеспечение, которое автоматически создает css при изменении файла scss (я знаю http://koala -app.com / , который делает это).

0 голосов
/ 31 декабря 2018

почему вам нужно расширить, когда вы можете добавить несколько классов с пробелом в элементе HTML.

<div class="font_arial_36 a_div_test">Like this</div>
0 голосов
/ 31 декабря 2018

если вы не хотите добавлять несколько классов к элементу html, тогда

.font_arial_36, .a_div_test {
 font-family:Arial;
 font-size:36px;
}

.a_div_test {
  width:300px;
  max-width:350px;
}

, кроме этого, кажется, что нет другого возможного способа наследования в css, мы должны использовать sass

0 голосов
/ 31 декабря 2018

Это невозможно в CSS.Что вы делаете, вы назначаете 2 класса для элемента, который вы хотите.

<div class="font_arial_36 a_div_test"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...