Question

我正在尝试弄清楚如何在动态生成的内容集中定位最终元素。

例如，所有生成的内容都会像这样吐出：

<div class="block">
  <div class="block-inner">
      <div class="box">
        <h1>Title</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <a href="#">A link</a>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
  </div>
</div>

在这种情况下，我希望最后一段有一个margin-bottom: 0;

但内容也可以这样生成：

<div class="block">
  <div class="block-inner">
      <div class="box">
        <h1>Title</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <a href="#">A link</a>
        <div class="inner-box">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        </div>
      </div>
  </div>
</div>

我希望inner-box div中的最后一段给出零保证金。

我尝试添加block-inner:lastchild {margin-bottom:0;}，但这无效。只是想知道如何以此为目标的最佳方式。干杯！

Answer 1

没有任何强有力的方法可以做到这一点。 .box > p:last-child只会获得一个p元素，该元素是.box的孩子;它不会与您的第二个示例中的任何内容匹配，因为.box的最后一个孩子是.inner-box，而不是p。

.box p:last-child不可靠，因为它会匹配父母最后一个孩子的所有p元素，这意味着它会匹配.inner-box的最后一个孩子，即使它＆＃ 39;不是整个p中的最后一个.box：

<div class="block">
  <div class="block-inner">
      <div class="box">
        <h1>Title</h1>
        <div class="inner-box">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <a href="#">A link</a>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
  </div>
</div>

你必须担心上一个p元素可能以某种方式嵌套的所有其他可能方式。

但是如果您知道最后一个p元素只能是.box的子元素，或者是最后一个.inner-box的子元素，那么您可以枚举这些元素两种可能性：

.box > p:last-child,
.box > .inner-box:last-child > p:last-child

如果您不知道该中间元素的类名，那么您可能无法完全取消:last-child：

.box > p:last-child,
.box > :last-child > p:last-child

即便如此，这并不能说明最后一个p可能不会出现在 .box的最后一个孩子中。

基本上，您需要编写一个选择器来计算可能出现最后p个元素的每个可能的嵌套结构;没有简单的方法可以说＃34;在动态结构中匹配此容器的最后p个后代。＆＃34;

Answer 2

使用static mapping = { autoTimestamp false }

这将选择最后一个p:last-child标记，并仅将样式应用于它。

<p>

.box {
  border: solid 1px
}
.box p:last-child {
  margin-bottom: 0;
  color: red;
}

用于定位动态内容集中的最终元素的CSS

2 个答案: