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




несколько классов css (23)

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

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

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

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

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

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

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

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

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

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

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

.composite 
{
   .something;
   .else
}

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


Существуют такие инструменты, как 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;
}

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

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

...


Содержите общие атрибуты и назначьте определенные (или переопределяющие) атрибуты снова.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

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

.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles

См. http://jsfiddle.net/qj76455e/1/

Самым большим преимуществом такого подхода является модульность - вы не создаете зависимости между классами (как вы это делаете, когда «наследуете» класс с помощью препроцессора). Поэтому любой запрос на изменение CSS не требует какого-либо большого анализа последствий.


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

.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 по умолчанию для большинства свойств по умолчанию, но не для всех.


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

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

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

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

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


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

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

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

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


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

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


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

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

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

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

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

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

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

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


Вы можете применить более одного класса CSS к элементу чем-то вроде этого класса = "something else"


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

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


Я тоже искал это как сумасшедший, и я просто понял это, попробовав разные вещи: P ... Ну, вы можете сделать это так:

composite.something, composite.else
{
    blblalba
}

Это внезапно сработало для меня :)


Это невозможно в CSS.

Единственное, что поддерживается в CSS, является более конкретным, чем другое правило:

span { display:inline }
span.myclass { background: red }

Пролет с классом «myclass» будет иметь оба свойства.

Другой способ - указать два класса:

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

Стиль «else» переопределит (или добавит) стиль «что-то»,


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

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

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


Не забывайте:

div.something.else {

    // will only style a div with both, not just one or the other

}

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

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


Если вам нужен более мощный текстовый препроцессор, чем LESS, проверьте PPWizard:

http://dennisbareis.com/ppwizard.htm

Предупреждение, что сайт действительно отвратительный, и есть небольшая кривая обучения, но он идеально подходит для создания CSS и HTML-кода с помощью макросов. Я никогда не понимал, почему другие веб-кодеры не используют его.


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

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

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

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


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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

В файле Css:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

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

Можно использовать класс (или 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 таким образом. (Например, изменение типов оформления текста).





css