скопировать CSS из одного класса в другой? - PullRequest
Новая
       31

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

4 голосов
/ 31 июля 2009

Это может показаться очень простым вопросом, но я не нашел ответа на него. Я знаю, что можно определить правило 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 для всех страниц сайта (включая те, у кого даже нет элемента [s] с классом element2.

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

Спасибо!

Ответы [ 5 ]

8 голосов
/ 31 июля 2009

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

<div class="element1 element2">

при наличии 

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

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

Также вы можете использовать что-то более продвинутое, например SASS , которое допускает смешивание.

1 голос
/ 31 июля 2009

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

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

0 голосов
/ 28 апреля 2012

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

0 голосов
/ 26 декабря 2011

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

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

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

.element1 {
    font-size: 14px;
}

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

.element1 {
    font-weight: bold;
}

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

0 голосов
/ 26 августа 2010

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-тегов на моем сайте, я должен добавить «класс» к каждому из них для тех исключений, которые могут быть болезненными. Это особенно актуально, когда на одном сайте работают несколько разработчиков.

...