Сегодня я столкнулся с проблемой ограничения объема css.
<div class="parent">
<div id="childWithNoCss">
<p>No css</p>
</div>
<div id="childWithCss">
<p>Apply css</p>
</div>
</div>
Мой css:
div{
color:red}
p{color:blue}
Мне нужно применить значение css для id childWithCss. Css исправлен (я не могу его изменить) просто нужно ограничить область действия только определенным элементом. Я не могу использовать атрибут scope, поскольку он несовместим в некоторых браузерах. Есть ли другое решение?
С уважением
Вы пытаетесь найти обходное решение для этого?
<style scoped>
p {
//some style
}
<style>
Если это так, есть некоторые плагины jQuery, которые делают то же самое и работают для IE, по крайней мере для IE 9 и выше. Вот один пример:
Плагин CSS с поддержкой jQuery
Если это не то, что вы пытаетесь сделать, можете ли вы не просто добавить некоторые вложенные css? Помогает ли это вообще с тем, что вы пытаетесь сделать?
Сбросьте цвет всего, кроме #childWithCSS
на цвет текста по умолчанию с немного jQuery.
$("p:not(#childWithCSS p)").css("color", "initial");
Вы должны иметь возможность сделать это с небольшим количеством jquery
if ($('.parent').has('#childWithCss')) {
$('#childWithCss').find('p').css('color', 'red')
}
Вы можете сбросить CSS элемента с помощью кода css: all:initial
.
Вы можете использовать некоторый javascript для этого во время выполнения для элементов, которые вы хотите сбросить. Я вижу, что вы отметили свой вопрос с помощью angularJS, поэтому jquery должен быть доступен.
jquery для сброса всех css для p в #childWithCss
БЕЗ #childWithCss
внутри .parent
:
$('.parent div:not(#childWithCss) p').css('all','initial')
id
childWithCss будет применять эти стили?