Css класс на основе класса

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

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

27 ответов

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

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

.rounded_corners < -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; >#header < .rounded_corners; >#footer

вау, LESS в значительной степени именно то, что я ищу . обидно, что он не поддерживается изначально, и что он написан на Ruby (я использую ASP.NET MVC)

Меньше — это красиво и заманчиво . но я не очень успешно использовал его с CSSEdit в том же рабочем процессе — так что я еще не полностью принял его.

Да, МЕНЬШЕ довольно мило, не так ли? Я действительно работал над портом .NET здесь: nlesscss.codeplex.com .

Некоторое время назад у меня не было точек доступа, что приносит почти нативную поддержку (думаю, что он использует jscript через com под обложками) . Я использую шаг после сборки, чтобы скомпилировать / объединить / миновать мои ресурсы с node.js в одном решение . есть также расширение Chirpy для VS.

иногда я спрашиваю себя, почему jQuery и такие вещи, как LESS, могут делать то, чего не может CSS. давай, дай да Пова разработчикам w n_n w

@JoelMartinez .Net имеет пакет Nuget для этого. Просто откройте консоль менеджера пакетов и используйте эту строку: PM> install-package dotless

Могу ли я использовать это для создания своих собственных классов, которые «наследуют» от классов Bootstrap, когда классы Bootstrap не компилируются LESS?

Я думаю, что это лучший ответ, но единственная проблема в том, что у нас нет ничего встроенного в CSS

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

Наследование не входит в стандарт CSS.

Знаете ли вы, какой класс преобладает, последние или первые, и безопасно ли поведение кросс-браузера? Допустим, у нас есть .firstClass .secondClass , тогда конечный font-size будет 12px или 20px и является ли этот кросс-браузер безопасным?

Правило с самой высокой специфичностью в отношении селектора победит. Применяются стандартные правила специфичности; в вашем примере, поскольку «first» и «second» имеют одинаковую специфичность, правило, объявленное позже в CSS, победит.

Мне также нравится идея не вводить несколько классов несколько раз — что является O (n ^ 2) работой 🙂

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

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

.composite, .something < display:inline >.composite, .else

Почему это отстой? это кажется очень хорошим Я не могу понять разницу между символом запятой и решением less.js.

Потому что, если классы .something и .else находятся в разных файлах и вы не можете их изменить, значит, вы застряли.

Это был правильный ответ, потому что он ответил на вопрос, используя чистый синтаксис CSS. Тем не менее, ответ лучше знать.

Другой недостаток этого решения, хотя в качестве решения загадки довольно приятно, что дырочный CSS-код может быстро стать неразрешимым, потому что невозможно логически организовать классы, например, мы хотим, чтобы определения .else и .something поместили в другие группы определений CSS. ,

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

.classOne < font-weight: bold; >.classTwo < font-famiy: verdana; > 
I'm bold and verdana.
 
 

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

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

/* ------------------------------------------------------------------------------ */ /* 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

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

Это было именно то, что я искал. Не стоит ли этот же подход работать с CSS-селекторами? Вместо указания h1, h2, etc Вы можете указать .selector1, .selector2, .etc

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

Это не «имена классов» в смысле OO. .something и .else больше не являются селекторами.

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

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

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

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

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

Это найдет все элементы с классом «композит» и добавит к элементам классы «что-то» и «еще». Итак, что-то вроде

закончится так:

Размер шрифта будет 12px для «p.Title», потому что он определен после первого в файле. он переопределяет первый размер шрифта.

@YWE: Значит ли это, что декларации должны быть наоборот, по сравнению с тем, что написано в этом ответе (по крайней мере, если мы хотим, чтобы пример был иллюстративным)? Если преобладает последний определенный, font-size: 16px никогда не font-size: 16px силу, верно?

Лучшее, что вы можете сделать, это

 
I'm bold and blue.
 
 
I'm bold and white.
 
 

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

@PavelGatnar Вы можете повторно использовать определения .something и .else в других определениях CSS.

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

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

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

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

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

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

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

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

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

Отстой css не имеет нативного наследования.

Источник

Basic CSS: How to Use Class Within Another Class

Want to apply a CSS style to a class within another class? In this tutorial, I’ll show you everything you need to know to use CSS classes.

To nestle classes or any other selector in CSS, just separate the selector hierarchy with spaces. Example: .parent .child < /* CSS Properties */ >

Let’s say you have the following code, and want to apply style only to that is within .

Your CSS file will be like this:

All h1’s with «post-title» class that are within the «blog-post» class receive the CSS property. Even if they are nested inside other tags. While everything outside «blog-post», the rule will not apply.

For demonstration purposes, if we want to apply the same effect to all h1, independent of class:

You can use any CSS selector while nesting with spaces, you can use id selectors with #id-name, tag selectors like h1, pseudo-classes, etc.

Selecting only direct child

If you have the code below and want to apply the color gray only on links that are direct children of the footer, and not the link within the div copyright:

Selecting only the first child

Let’s take the same example above, but now the difference is that you want to apply the hierarchy to the first link only.

The code below will apply the grey to both the first child of footer and the first child of .copyright.

To apply only to the first child of footer:

Selecting only the last child

It’s quite common in lists to select the last item in the list and give it a different style, without the lower separation border, for example. The code is the same, we just need to change the selector.

Источник

Наследование классов в CSS — class, id, !importent

Разберём, как наследуются значения стилей для классов.

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

Например у нас есть следующая структура:

Стили у elements например будут одни, где присутствует одинаковый белый фон.

1. Применение дополнительного класса для перезаписи стиля определённого блока

Если мы добавим например к последнему блоку дополнительный стиль element-two :

И стиль для класса element-two добавим другой цвет фона, например красный. У такого блока с дополнительным классом перезапишутся стили, поменяется фон блока на красный:

А другие стили, которые не будут изменены и добавлены к дополнительному классу, будут наследоваться от класса element

2. Добавление id для перезаписи стиля дополнительного класса element-two

При добавлении id к блоку в HTML и написании стиля для класса element-two с добавлением #block , те стили которые применялись ранее только для дополнительного стиля element-two перезапишутся за счёт айдишника:

2. Добавление !important к значению перезапишет стиль, делая его важным.

Important — переводится как важный и применив данное дополнение к значению, сделает значение ещё более приоритетным:

Но применение !important не является хорошим тоном в среде веб-разработчиков, означает, что при написании кода, что-то было упущено, где-то был просчёт в иерархии при определении классов.

Данный метод не является ошибкой, просто не так круто выглядит в глазах опытных программистов!)

Источник