您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何从公共CSS样式中隔离div?

如何从公共CSS样式中隔离div?

CSS层叠和继承级别3介绍了all速记属性和该unset关键字,这一起,让您方便地实现这一目标。

例如,如果作者all: initial在元素上指定,它将阻止所有继承并重置所有属性,就像级联的作者,用户用户代理级别中没有规则一样。

这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意,应用于该元素的任何“认”样式(例如,display: block来自UA样式表上的块元素,例如<div>)也将被吹走。

您需要将其应用于all: initialdiv 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;
  ...
}
CSS 2022/1/1 18:22:01 有371人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶