Question

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

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

那么，我想要将div元素置于<scroll-content>之外，甚至更好地禁用<scroll-content>上div的CSS属性}}

这是代码，所以我可以让事情更清楚：

HTML

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

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

HTML

   <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">继承了<scroll-content>的所有css属性，我希望在这种情况下避免使用它。< / p>

Answer 1

您的标题（子）继承其父级（滚动内容）CSS样式。您需要通过显式更改继承的样式来清除任何不需要的继承规则。例如，如果要重置css-display，请写

.header {
   display: initial;
}

希望将来我们可以通过the all:initial技巧避免这种情况 - 但是，它目前还不是supported enough.

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

1 个答案: