копировать css из одного класса в другой?

StackOverflow https://stackoverflow.com/questions/1211511

  •  06-07-2019
  •  | 
  •  

Вопрос

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

.element1, .element2{
  font-size:14px;
}

Однако возможно ли сделать то же самое, но применить css к элементу после определения css для element1?Что- то вроде этого:

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

Таким образом, element2 теперь наследует css первого элемента.Причина, по которой я пытаюсь это сделать, заключается в том, что у меня есть определение css для element1, которое загружается для всех страниц сайта.Затем для одной конкретной страницы (которая загружает основной файл css вместе со своим собственным) Я хотел бы использовать стиль из element1 и добавить к нему.Чего я пытаюсь избежать, так это загрузки определения для element2 для всех страниц сайта (включая те, у которых даже нет element [s] с классом element2.

Можно ли это сделать?Я понимаю, что мог бы легко достичь этого с помощью jQuery (т.е. $(".element2").addClass(".element1");) но я бы хотел избежать использования скриптов для моего css.

Спасибо!

Это было полезно?

Решение

Вы можете использовать:

<div class="element1 element2">

имея при этом

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

и таким образом, будут применяться оба класса.jQuery достаточно умен, чтобы добавлять классы и удалять подобные классы.

Также вы можете использовать что-то более продвинутое, например ДЕРЗОСТЬ это исключает миксины.

Другие советы

Насколько мне известно, нет, это невозможно только с помощью CSS.Вы уже определили один способ достижения своих целей, и я должен был бы предположить, что это лучший способ.

В CSS класс может наследовать только от своего родителя, и то только в том случае, если <example-attribute>: inherit; (Я использовал это с color:, background-color:, font-family:, font-size: среди прочих, хотя я предупреждаю вас, что если font-size родительского размера, описываемого как увеличение или уменьшение, то font-size изменится и в ребенке тоже.

CSS действительно нуждается в этой функциональности.Указание нескольких классов на уровне элемента - это здорово, но не то же самое, что возможность перейти:

.my_class { class:my_global_class; }

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

Прямо сейчас я работаю над сайтом, где у нас есть множество различных комбинаций шрифтов.Некоторые теги h и p выглядят по-разному в зависимости от их страницы и контекста.Это настоящая боль, когда наш список шрифтов для семейства шрифтов должен существовать в каждом классе, где они нам нужны.Я бы хотел иметь возможность сделать это:

/* defualt for p tags */
p { font-family:Times, Arial, Helvetica; }

/* exceptions */
.arial {font-family:Arial, Times, Helvetica; }
.segoe {font-family:Segoe, Arial, Helvetica; }

.my-page1 p {class:arial;}
.my-page2 p {class:segoe;}

В приведенном выше примере мой список шрифтов будет существовать в одном центральном месте, и я могу применять их везде, где захочу, исключительно в файле CSS.Если у меня на сайте есть 100 тегов p, то я должен добавить "класс" к каждому из них для этих исключений, что может быть проблематично.Это особенно верно, когда у вас есть несколько разработчиков, работающих над одним сайтом.

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

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

Например, у вас может быть allpages.css, который включен во все страницы и содержит CSS:

.element1 {
    font-size: 14px;
}

Тогда у вас может быть отдельный CSS-файл под названием exceptions.css, который содержит:

.element1 {
    font-weight: bold;
}

Это работает, потому что, когда для одного и того же селектора определено несколько правил, они объединяются вместе.Используя этот метод, вам не пришлось бы изменять значения класса для HTML-элементов.

Синтаксис , подобный тому, который используется в http://lesscss.org/
Я надеюсь, что вы найдете там полезных сотрудников

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top