селекторы - несколько классов css




Может ли класс CSS наследовать один или несколько других классов? (19)

Я чувствую себя глупо за то, что так долго был веб-программистом и не знал ответа на этот вопрос, я действительно надеюсь, что это возможно, и я просто не знал об этом, а не о том, что, на мой взгляд, является ответом (а это то, что это невозможно) ,

Мой вопрос в том, можно ли сделать класс CSS, который «наследует» от другого класса CSS (или более одного).

Например, скажем, у нас было:

.something { display:inline }
.else      { background:red }

То, что я хотел бы сделать, это что-то вроде этого:

.composite 
{
   .something;
   .else
}

где класс «.composite» будет отображаться в строке и иметь красный фон


CSS действительно не делает то, что вы просите. Если вы хотите написать правила с этой сложной идеей, вы можете проверить compass . Это рамочная таблица стилей, которая похожа на уже упоминавшийся Less.

Это позволяет вам делать миксины и весь этот хороший бизнес.


В определенных обстоятельствах вы можете сделать «мягкое» наследование:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Это работает, только если вы добавляете класс .composite к дочернему элементу. Это «мягкое» наследование, потому что любые значения, не указанные в .composite, явно не наследуются. Имейте в виду, что все равно меньше персонажей просто писать «inline» и «red» вместо «inherit».

Вот список свойств и независимо от того, делают они это автоматически: https://www.w3.org/TR/CSS21/propidx.html


Вы можете добавить несколько классов к одному элементу DOM, например

<div class="firstClass secondClass thirdclass fourthclass"></div>

Наследование не является частью стандарта CSS.


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

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...


Да, но не совсем с этим синтаксисом.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

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

Это лучший хак, который я мог бы придумать.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Затем примените глобальную переменную к желаемому элементу, а не к самим именам классов

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

К сожалению, CSS не обеспечивает «наследование» в том, как это делают языки программирования, такие как C ++, C # или Java. Вы не можете объявить класс CSS, а затем расширить его с помощью другого класса CSS.

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

<span class="styleA styleB"> ... </span>

CSS будет искать все стили, которые можно применить на основе вашей разметки, и объединить стили CSS из этих нескольких правил вместе.

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


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

Но это не совсем так. Я задаю вопрос о наследовании. Реальная точка заключается в том, что наследование в CSS выполняется не через классы, а через иерархии элементов. Поэтому для моделирования унаследованных признаков вам необходимо применить их к различным уровням элементов в DOM.


Менее и Sass - предварительные процессоры CSS, которые расширяют язык CSS ценными способами. Только одно из многих улучшений, которые они предлагают, - это именно тот вариант, который вы ищете. Есть несколько очень хороших ответов с Less, и я добавлю решение Sass.

У Sass есть опция расширения, которая позволяет одному классу полностью перейти на другой. Подробнее о расширении вы можете прочитать в этой статье



Нет, вы не можете сделать что-то вроде

.composite 
{
   .something;
   .else
}

Это не «классные» имена в смысле ОО. .something и .else просто селектор больше ничего.

Но вы можете указать два класса на элементе

<div class="something else">...</div>

или вы можете изучить другую форму наследования

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}
<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Если абстракции backgroundcolor и color унаследованы от настроек в охватывающем div, который имеет стиль .foo . Возможно, вам придется проверить точную спецификацию W3C. inherit по умолчанию для большинства свойств по умолчанию, но не для всех.


Путь SCSS для данного примера будет примерно таким:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Дополнительная информация, проверьте основы sass


Существуют такие инструменты, как LESS , которые позволяют вам составлять CSS на более высоком уровне абстракции, аналогичном тому, что вы описываете.

Меньше вызовов этих «миксинов»

Вместо

/* CSS */
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Ты мог бы сказать

/* LESS */
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Также есть SASS, который вы можете найти на http://sass-lang.com/ . Существует тег @extend, а также система типа микширования. (Рубин)

Это своего рода конкурент МЕНЬШЕ.


Хотя прямое наследование невозможно.

Можно использовать класс (или id) для родительского тега, а затем использовать комбинаторы CSS для изменения поведения дочернего тега из его иерархии.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

Я бы не предложил использовать так много пролетов, как пример, но это всего лишь доказательство концепции. Есть еще много ошибок, которые могут возникнуть при попытке применить CSS таким образом. (Например, изменение типов оформления текста).


Элемент может принимать несколько классов:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

И это примерно так же близко, как вы к сожалению. Мне бы очень хотелось увидеть эту функцию вместе с классными псевдонимами.


Я понимаю, что этот вопрос сейчас очень старый, но здесь нет ничего!

Если целью является добавление одного класса, который подразумевает свойства нескольких классов, в качестве собственного решения, я бы рекомендовал использовать JavaScript / jQuery (jQuery действительно не нужен, но, безусловно, полезен)

Если у вас есть, например, .umbrellaClass который «наследует» от .baseClass1 и .baseClass2 вас может быть какой-то JavaScript, готовый к работе.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Теперь все элементы .umbrellaClass будут иметь все свойства .baseClass s. Обратите внимание, что, подобно наследованию ООП, .umbrellaClass может иметь или не иметь собственных свойств.

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

Однако у scks css нет собственного наследования.


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

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Это найдет все элементы с классом «композит» и добавит к элементам классы «что-то» и «еще». Так что что-то вроде <div class="composite">...</div> закончится так:
<div class="composite something else">...</div>


Идеальный выбор времени : я перешел от этого вопроса к своей электронной почте, чтобы найти статью о LESS , библиотеке Ruby, которая, среди прочего, делает это:

Поскольку super выглядит так же, как footer , но с другим шрифтом, я буду использовать метод включения класса Less (они называют его mixin), чтобы он также включил эти объявления:

#super {
  #footer;
  font-family: cursive;
}




css