Ограничение CSS для элемента и его потомков во время выполнения

Question

Ограничение CSS для элемента и его потомков во время выполнения

0

Сегодня я столкнулся с проблемой ограничения объема 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, поскольку он несовместим в некоторых браузерах. Есть ли другое решение?

С уважением

Vimal Basdeo 29 май 2016, в 16:11

Источник

0

Что вы имеете в виду? Что только div с id childWithCss будет применять эти стили?
Francisco Romero 02 июнь 2016, в 09:36

Теги:

angularjs

css

4 ответа

Ещё вопросы

Что вы имеете в виду? Что только div с id childWithCss будет применять эти стили?

jtmingus · Answer 1 · 2016-05-31T18-16-00.000Z

Вы пытаетесь найти обходное решение для этого?

<style scoped>
  p { 
    //some style
  }
<style>

Если это так, есть некоторые плагины jQuery, которые делают то же самое и работают для IE, по крайней мере для IE 9 и выше. Вот один пример:

Плагин CSS с поддержкой jQuery

Если это не то, что вы пытаетесь сделать, можете ли вы не просто добавить некоторые вложенные css? Помогает ли это вообще с тем, что вы пытаетесь сделать?

Загрузите внешний CSS для определенного DIV

clickbait · Answer 2 · 2016-06-04T21-09-00.000Z

Сбросьте цвет всего, кроме #childWithCSS на цвет текста по умолчанию с немного jQuery.

$("p:not(#childWithCSS p)").css("color", "initial");

Suresh Vyas · Answer 3 · 2016-06-04T09-20-00.000Z

Вы должны иметь возможность сделать это с небольшим количеством jquery

if ($('.parent').has('#childWithCss')) { 
    $('#childWithCss').find('p').css('color', 'red')
}

Работает в этом случае, но то, что я искал, было более динамичным. Мне не нужно обходной путь для установки CSS, а просто ограничить его область.

JasperZelf · Answer 4 · 2016-05-29T16-42-00.000Z

Вы можете сбросить CSS элемента с помощью кода css: all:initial.

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

jquery для сброса всех css для p в #childWithCss БЕЗ #childWithCss внутри .parent:

$('.parent div:not(#childWithCss) p').css('all','initial')

http://jsfiddle.net/2yXsL/3/

Я не могу сбросить CSS элемента, который может содержать собственный элемент CSS.