在运行时将css限制为元素及其后代

Question

今天我遇到了限制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}

我需要应用特定于id childWithCss 的css。 css是固定的（我不能改变它）只需要将其范围仅限于特定元素。 我不能使用scope属性，因为它在某些浏览器中不兼容。 还有其他解决方案吗？

此致

Answer 1

您是否正在尝试为此找到解决方法？

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

如果是这样，有一些jQuery插件可以做同样的事情并且适用于IE，至少对于IE 9及更高版本。这是一个例子：

jQuery scoped CSS plugin

如果那不是你想要做的，你能不能只添加一些嵌套的CSS？这对你想做的事情有帮助吗？

Load an external CSS for a specific DIV

Answer 2

您可以使用css代码重置元素的CSS：all:initial。

您可以使用一些javascript在运行时为要重置的元素执行此操作。我看到你用angularJS标记了你的问题，所以jquery应该可用。

jquery解决方案，重置#childWithCss内不包含.parent的div中p的所有css：

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

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

Answer 3

你应该可以用一点jquery

来做

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

Answer 4

使用一些jQuery将除#childWithCSS以外的所有内容的颜色重置为默认文本颜色。

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