Можно ли применять CSS-объявления с подклассами к нескольким классам, используя запятую?

0

В настоящее время у меня есть классы CSS, которые отличаются, но для элементов, имеющих дочерние ChildClass одного класса (ChildClass). Я хочу изменить непрозрачность дочернего класса, когда родительские классы активны. Сейчас я делаю это со многими объявлениями CSS (см. Пример ниже). Можно ли это сделать с одной декларацией?

Текущий CSS

.class1 {
    ...elided...
}

.class2 {
    ...elided...
}

.class1:active .ChildClass {
    ...elided...
}

.class2:active .ChildClass {
    ...elided...
}

Для обоих, изменение дочернего класса будет одинаковым. Могу ли я сделать что-то вроде этого?

Что я хотел бы сделать

.class1:active,class2:active .ChildClass {
    ...elided...
}

Будет ли это работать? Что браузер поддерживает?

  • 0
    Вы видели это: stackoverflow.com/questions/5110249/wildcard-in-css-for-classes
  • 0
    Вы пробовали предложенный код?
Показать ещё 1 комментарий
Теги:
browser

2 ответа

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

Нет, вам нужно поместить FULL селекторные строки в каждый раздел с разделителями-запятыми, поэтому вам нужно:

.class1:active .ChildClass, class2:active .ChildClass {
    ...elided...
}

.class1:active вас был таргетинг .class1:active и .class2:active.ChildClass а не .ChildClass для каждого. Запятые отдельные полные селекторные строки, аббревиатуры нет, что имеет смысл, если вы думаете об этом, потому что с помощью сложного селектора CSS не будет никакого способа узнать, где начинается сокращение "ярлыка".

Если вы заинтересованы в сокращении CSS или других способах экономии времени и энергии пальца при наборе сложных селекторов, я рекомендую посмотреть в SASS или другой препроцессор (LESS, Stylus и т.д.).

  • 0
    Спасибо, это работает!
  • 0
    @ DonRhummy Отлично! Отметьте это как ответ, когда у вас есть шанс, если вы не возражаете! Также ознакомьтесь с моими изменениями в отношении CSS-препроцессоров.
Показать ещё 1 комментарий
1

Просто запятая отделите все свои объявления:

.class1, .class2, .class1:active .ChildClass, .class2:active .ChildClass {
    ...elided...
}

Второй пример - это не то, что вы ищете, так как это эквивалентно:

.class1:active {
    ...elided...
}
class2:active .ChildClass {
    ...elided...
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню