CSS层叠和继承级别3介绍了all
速记属性和该unset
关键字,这一起,让您方便地实现这一目标。
例如,如果作者all: initial
在元素上指定,它将阻止所有继承并重置所有属性,就像级联的作者,用户或用户代理级别中没有规则一样。
这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意,应用于该元素的任何“默认”样式(例如,display: block
来自UA样式表上的块元素,例如<div>
)也将被吹走。
您需要将其应用于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;
}
另外,为了获得更广泛的浏览器支持,您可以all
通过设置所有已知的CSS属性来手动尝试执行操作(不要忘记带前缀的版本):
#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;
...
}