如何隔离公共CSS样式的div？
我有一些代码在这里例如在HTML中
<html> <body> <img src='an image source'/> <h1>Hi it's test</h1> <div id='mydiv'> <img src='an image source'/> <h1>Hi it's test</h1> </div> </body> </html> 如果我使用下面的CSS代码样式：
img{ width:100px; height:100px; } h1{ font-size:26px; color:red; }
问题是：我怎样才能防止和隔离从公共标签样式风格的mydiv div标签内的标签？
CSS级联和inheritance级别3引入了all速记属性和未unset关键字 ，它们一起使您可以方便地实现这一点。
例如，如果作者在元素上指定了
all: initial，则将阻止所有inheritance并重置所有属性，就好像没有在级联的作者，用户或用户代理级别中出现的规则一样。这对页面中包含的“小部件”的根元素很有用，它不希望inheritance外部页面的样式。 但是，请注意，应用于该元素的任何“默认”样式（例如，来自块元素（如
<div>的UA样式表中的display: block））也将被吹掉。
你需要all: initial应用all: initial你的div和all: unset到它的后代：
#mydiv { all: initial; /* blocking inheritance for all properties */ } #mydiv * { all: unset; /* allowing inheritance within #mydiv */ }
你可能希望在你的div上使用一个类而不是一个id，这样你编写的任何规则都不需要匹配或者打败这个规则中使用的高特征。
为了确保安全，您可能还想阻止潜在的伪元素后代的样式：
#mydiv::before, #mydiv::after, #mydiv *::before, #mydiv *::after { all: unset; }
或者，为了更广泛的浏览器支持，您可以手动尝试通过设置所有已知的CSS属性来完成all操作（不要忘记前缀的版本）：
#mydiv { /* * using initial for all properties * to totally block inheritance */ align-content: initial; align-items: initial; align-self: initial; alignment-baseline: initial; animation: initial; backface-visibility: initial; background: initial; ... } #mydiv::before, #mydiv::after, #mydiv *, #mydiv *::before, #mydiv *::after { /* * using inherit for normally heritable properties, * and initial for the others, as unset does */ align-content: initial; align-items: initial; align-self: initial; ... color: inherit; ... }
您可以鼓励all速记属性的浏览器支持，并跟踪这些问题链接的采用情况：
- ☑Chrome 37+
- ☑ 火狐27 +
- ☑Webkit（Safari 9.1+）
- ☐Internet Explorer
- ☐ 边缘
- ☑歌剧24+
all速记属性的最新浏览器支持信息可在此处获得 。
你不能在技术上，这就是CSS是如何工作的。 如果在样式表中为div标签定义了任何样式，则将应用于所有div元素。
你可以尝试的一些事情是不要使用标签名称， 而是给类名称，并给类的风格声明。 所以你可以确定所有的样式将会去。
要么。 如果你想要一些特定的Div标签没有其他Div的样式。 你总是可以重置它给一些不同的类名称或ID并重置样式声明
有一件可能有用的事情是CSS直接子select器 ，它可以在包括IE7 +在内的所有浏览器中使用。 这可以让你应用不会级联到儿童的样式。 例如在你的代码中，你可以使用这个CSS：
body > img { width:100px; height:100px; } body > h1 { font-size:26px; color:red; }
而且这个CSS只适用于直接在BODY元素上的元素。
