如何从公共CSS样式隔离div？ [英] How To Isolate a div from public CSS styles?
问题描述
我有一些代码，例如这里的html
< html>
< body>
< img src ='图像源'/>
< h1>高是测试< / h1>
< div id ='mydiv'>
< img src ='图像源'/>
< h1>高是测试< / h1>
< / div>
< / body>
< / html>
如果我使用以下css代码为其设置样式：
img {
width：100px;
height：100px;
}
h1 {
font-size：26px;
color：red;
}
问题是：如何防止和隔离mydiv div
CSS级联和继承级别3 介绍 all 速记属性和 unset 关键字，可以方便地实现这一点。
$例如，如果作者在元素上指定
all：initial ，它将阻止所有继承和重置所有属性，好像没有规则
出现在级联的作者，用户或用户代理级别。
这对于根元素的包含在
页面中的小部件，其不希望继承外部页面的样式。
但是，请注意，任何默认样式应用于该元素（例如
as，例如 display：block 元素如
as < div> ）也将被吹走。
您需要将 all：initial 应用到您的div和 all：unset
#mydiv {
all： / *阻塞所有属性的继承* /
}
#mydiv * {
all：unset; / *允许在#mydiv中继承* /
}
在你的div而不是一个id，所以你写的风格其后代的任何规则将不必匹配或打败这条规则中使用的高特异性。
真的很安全，你可能想要阻止可能的伪元素后代样式：
mydiv :: before，
#mydiv :: after，
#mydiv * :: before，
#mydiv * :: after {
all：unset;
}
或者，为了支持更广泛的浏览器，您可以手动尝试< c $ c> all 通过设置所有已知的CSS属性（不要忘记前缀版本）：
#mydiv {
/ *
*使用所有属性的初始值
*完全阻止继承
* /
align-内容：
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 {
/ *
*对于通常的可遗传属性使用继承，
*和其他的初始化， $ b * /
align-content：initial;
align-items：initial;
align-self：initial;
...
color：inherit;
...
}
您可以鼓励浏览器支持< c $ c> all 速记属性，并通过这些问题链接跟踪其使用：
- ☑ Chrome 37 +
- ☑ Firefox 27 +
- ☑ Webkit （Safari 9.1 +）
- ☐ Internet Explorer li>
- ☐边
- ☑Opera 24 +
可使用 all 速记属性的信息此处< a>。
i have some code for example here in 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>
if i used the following css code for styling it:
img{
width:100px;
height:100px;
}
h1{
font-size:26px;
color:red;
}
the question is : How can i prevent and isolate the tags inside the mydiv div tag from styling by the public tags style ?
CSS Cascading and Inheritance Level 3 introduces the all shorthand property and the unset keyword, which, together, allow you to achieve this conveniently.
For example, if an author specifies
all: initialon an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g.
display: blockfrom the UA style sheet on block elements such as<div>) will also be blown away.
You’ll need to apply all: initial to your div and all: unset to its descendants:
#mydiv {
all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
all: unset; /* allowing inheritance within #mydiv */
}
You may want to use a class on your div instead of an id, so that any rules you write to style its descendants won’t have to match or beat the high specificity used in this rule.
To be really safe, you may want to block styles on potential pseudo-element descendants too:
#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
all: unset;
}
Alternatively, for broader browser support, you can manually attempt to do what all does by setting all known CSS properties (don’t forget the prefixed versions):
#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;
...
}
You can encourage browser support for the all shorthand property and track its adoption with these issue links:
- ☑ Chrome 37+
- ☑ Firefox 27+
- ☑ Webkit (Safari 9.1+)
- ☐ Internet Explorer
- ☐ Edge
- ☑ Opera 24+
Up-to-date browser support information for the all shorthand property is available here.
这篇关于如何从公共CSS样式隔离div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
