Question

我在影子根中有一些<p>标记，它们是内联代码。当我尝试为每个设置样式时，如 display：block 。它失败了。如何设置一个项目低于其他项目？谢谢。这是我用过的代码：

polyfill-next-selector{content: '.card-header #phone';}
.card-header ::content #phone
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #building';}
.card-header ::content #building
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #office';}
.card-header ::content #office
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #skype';}
.card-header ::content #skype
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #computerName';}
.card-header ::content #computerName
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #businessMobile';}
.card-header ::content #businessMobile
{
  display:block;
  font-size: 0.7rem;
}
</style>
<div class="card-header" layout horizontal center>
  <content select="img"></content>
  <content select="h2"></content>
  <content select="#phone"></content>
  <content select="#building"></content>
  <content select="#office" ></content>
  <content select="#skype" ></content>
  <content select="#computerName" ></content>
  <content select="#businessMobile" ></content>
</div>
<content></content>

Answer 1

您需要定位分发内部内容标记的点头，而不是::内容本身。

虽然它们在逻辑上不在内容节点内部，但是css选择器也是这样理解的。

所以而不是

::content 
{
  display:block;
  font-size: 0.7rem;
}

应该是

::content > p
{
  display:block;
  font-size: 0.7rem;
}

这是一个有效的jsfiddle。

如果您还没有，请在样式化分布式节点上查看这个不错的tutorial。

如何在阴影根中设置内联元素的块显示

1 个答案: