Как изолировать весь файл CSS под зонтиком 1 класса

#css

Вопрос:

Если бы у меня были сотни простых объявлений CSS, как показано ниже, есть ли способ инкапсулировать весь css, чтобы он применялся только в том случае, если у его родителя был указанный класс?

 div{
  color:#ffffff;
}

...

a{
  color:#000000;
}

и превратить его во что-то вроде этого?

 .parentClass{

div{
  color:#ffffff;
}

...

a{
  color:#000000;
}

}// end of parent class

вместо того, чтобы добавлять .ParentClass к каждому отдельному объявлению?

Редактировать: я не ищу наследования, я ищу в основном изолировать чужой файл css в оболочке, чтобы он не нарушал работу остальной части сайта, на котором он используется, потому что они написали css с использованием элементов высокого уровня вместо пользовательских классов.

1. Я полагаю, что вы можете сделать что-то подобное с помощью псевдокласса is() или where() , но вам нужно убедиться, что существует кросс-браузерная поддержка, которая отвечает вашим потребностям, поскольку они являются новыми.

2. Невозможно сделать это с помощью простого синтаксиса css?

3. Похоже, вы хотите использовать пространство имен вашего CSS, чтобы оно влияло только на часть страницы. Я думаю, что есть способ сделать это с помощью Shadow DOM, но я никогда не пробовал. Вот так: blog.bitsrc.io/scoping-css-using-shadow-dom-a548985b73af

4. Но то, что я делал в прошлом, это просто добавлял класс myclass к корневому элементу области, на которую должен влиять CSS, а затем добавлял .myclass в начало каждого селектора.

5. @Sean Я согласен. Я думаю, что можно было бы использовать новый заголовок / вступление, чтобы дать понять, что речь идет скорее об изоляции правил CSS, а не о вложенности правил CSS.

Ответ №1:

Ответ — НЕТ.

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

Возможно, что-то будет реализовано в будущем, но на сегодняшний день ответа НЕТ.

Ответ №2:

Не самый элегантный ответ, но то, что я делал в прошлом, — это добавить класс в локальный корень области страницы, к которой принадлежит CSS, например my-component . Затем добавьте .my-component в начало каждого селектора, который вы хотите ограничить этой областью.

Я думаю, что, возможно, могут быть более современные / элегантные способы сделать это с помощью ShadowDOM или с использованием styled-components, но я с ними не знаком.