如何将html元素放置在新生成的元素之外

Question

是否可以将Html元素放置在新生成的Html元素之外？

嗯，我有一个IONIC2应用程序，它生成一个新的元素<scroll-content>，问题是这个元素有一些影响子元素的CSS属性。

所以，我想要做的是将我的div元素放在<scroll-content>之外，或者更好地在div上禁用<scroll-content>的CSS属性。

下面是代码，这样我就可以让事情更清楚了：

   <ion-content id="contentPadding">
     <div class="header">
     </div>
   </ion-content>

当Ionic呈现上述代码时，浏览器生成如下内容：

   <ion-content id="contentPadding">
    <scroll-content>
     <div class="header">
     </div>
     <scroll-content>
   </ion-content>

CSS：

.top{
  background:black;
}

//generated

scroll-content{

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

我猜，这清楚地表明，正在创建一个名为<scroll-content>的新元素，<div class="header">继承了<div class="header">的所有css属性，在我的情况下，这是我想要避免的。

Answer 1

您的头(子)正在继承它的父(滚动内容) CSS样式。您需要通过显式更改继承的样式来清除任何不必要的继承规则。例如，如果要重置css-显示，请编写

.header {
   display: initial;
}

希望在将来我们可以用全部:首字母技巧来避免这种情况--但是，目前它不是足够支持了。