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

Вопрос: Я пытаюсь получить свойство класса из другого класса. Вот мой простой тестовый HTML: An arrow! И вот мой CSS: .test{ position: relative; color: red; width: 50%; margin: 30px; padding: 20px; } .bgcolor{ background-color: yellow; } .test:after{ right: 100%; top: 50%; border: solid transparent; content: " "; position: absolute; border-right-color: yellow;

Вопрос:

Я пытаюсь получить свойство класса из другого класса.

Вот мой простой тестовый HTML:

<div class=’test bgcolor’> An arrow! </div>

И вот мой CSS:

.test{ position: relative; color: red; width: 50%; margin: 30px; padding: 20px; } .bgcolor{ background-color: yellow; } .test:after{ right: 100%; top: 50%; border: solid transparent; content: » «; position: absolute; border-right-color: yellow; border-width: 10px; margin-top: -10px; }

Класс bgcolor устанавливает цвет фона и может быть изменен с желтого на другой цвет в типичной ситуации.

И test:after для маленькой стрелки и цвета стрелки должен быть таким же, как и в поле, которое определяется атрибутом background-color в классе bgcolor.

Теперь у меня возникла проблема с тем, как установить параметр border-right-color в ‘test: after’ со значением background-color в bgcolor.

Если эта проблема может быть решена, единственное, что мне нужно изменить цвет (стрелка + окно), – это просто изменение цвета в bgcolor.

Пожалуйста, дайте мне совет.

Спасибо.

Лучший ответ:

То, что вы ищете, это переменные CSS. Они сделали бы что-то вроде этого:

—testBGColor: yellow; .bgcolor { background-color:var(—testBGColor); } .test:after { border-right-color:var(—testBGColor); … }

Проблема с этим подходом заключается в том, что переменные CSS еще не поддерживаются основными браузерами: могу ли я использовать переменные CSS?

Таким образом, вам придется использовать препроцессор CSS как LESS или SASS.

Решение с МЕНЬШЕ:

@testBGColor: yellow; .bgcolor { background-color:@testBGColor; } .test:after { border-right-color:@testBGColor; … }

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

Ответ №1

Разве это не работает?

} .bgcolor{ background-color: yellow; border-color: yellow; border-width: 0; } .test:after{ right: 100%; top: 50%; border: solid transparent; content: » «; position: absolute; border-width: 10px; margin-top: -10px; } Ответ №2

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

$yellow: #FFC900; .bgColor { background-color: $yellow; } .test:after { border-right-color: $yellow; … }

Это пример Сасса.

Ответ №3

Добавьте в div еще один класс, например “.theme-1” для первого цвета и настройте его

.bgcolor.theme-1{ background-color: red; border-color: red; } .bgcolor.theme-1:after{ border-right-color: red; }

и т.д. с “.teme-2”, “. theme-3” и т.д.

Оцените статью
Добавить комментарий