问题

Question

问题

我想对元素的否类型的元素的最后一个子元素应用样式。

请不要与以下元素混淆：最后一个元素 IF 不是特定类型。

示例

<div class="container>
  <div>Child 1</div>
  <div>Child 2</div>
  <span>Child 3</span>
  <template></template>
  <span>Child 4</span>
  <template></template>
</div>

在这种情况下，我想将样式应用于不是<template>类型的最后一个元素（在这种情况下，将是 Child 4 ）。

请注意，:nth-last-child(2)不适用，因为可能有更多的<template>元素。

我尝试了什么（没用）

.container > :not(template):last-child {
  // Style here
}

.container > :last-child:not(template) {
  // Style here
}

已经谢谢您了！

编辑-似乎我的问题是抽象的，所以我会更具体。

我想要一个通用的间距类（将其应用于容器将在项目之间简单地添加一个空格）：

.vertical-spacing>* {
  margin: 20px 0;
}

.vertical-spacing> :first-child {
  margin-top: 0;
}

.vertical-spacing> :last-child {
  margin-bottom: 0;
}


/* For better visibility of example */

.vertical-spacing {
  background: #ff0000
}

.vertical-spacing>* {
  background: #00ff00;
}

<div class="vertical-spacing">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

我正在使用 Polymer 3.0 做一个项目，在这里您可以使用一个条件模板，该模板仅在某些条件下可见：

<template is="dom-if" if="condition">
  <div>Content</div>
</template>

如果<template>是间距容器中的最后一个子元素（或多个模板是最后一个子元素，数字不固定）并且条件为false，则结果是{{1}的内容}已隐藏，但是<template>元素本身仍然存在。结果，在容器的末端有一个无用的空间：

<template>

.vertical-spacing>* {
  margin: 20px 0;
}

.vertical-spacing> :first-child {
  margin-top: 0;
}

.vertical-spacing> :last-child {
  margin-bottom: 0;
}


/* For better visibility of example */

.vertical-spacing {
  background: #ff0000
}

.vertical-spacing>div {
  background: #00ff00;
}

我现在希望能够将删除边距的样式应用于容器中不是<div class="vertical-spacing"> <div>Child 1</div> <div>Child 2</div> <div>Child 3</div> <temlate> <div style="display: none">Content</div> </temlate> </div> <div style="background: #0000ff; color: white">Stuff after container: there is a margin on top as you can see</div>的最后一个元素。

Answer 1

.vertical-spacing>* {
  margin: 20px 0;
}

.vertical-spacing> :first-child {
  margin-top: 0;
}

.vertical-spacing> :last-child {
  margin-bottom: 0;
}


/* For better visibility of example */

.vertical-spacing {
  background: #ff0000
}

.vertical-spacing>* {
  background: #00ff00;
}


.vertical-spacing > *:last-of-type {
  margin-bottom:0;

}
span{
display:inline-block;
}

<div class="vertical-spacing">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <p>'p' tag child </p>
  <span>'span' tag child </span>
  <div>Child 3</div>
  <span>'span' tag child </span>
  <template>
    <div style="display: none">Content</div>
  </template>
</div>
<div style="background: #0000ff; color: white">Stuff after container: there is a margin on top as you can see</div>

简单地写

.vertical-spacing > *:last-of-type { margin-bottom:0;}

我认为这将解决您的保证金问题。

Answer 2

请查看this article，它清楚地说明了:nth-child和:nth-of-type之间的区别，这可能是:last-of-type可以工作而:last-child不能工作的原因。

:nth-of-type会查看父元素的所有子元素，但是:nth-child的工作方式略有不同，并且如果您像在此处那样具有不同类型的子元素，则它们并不总是有效。

希望这会有所帮助：）

Answer 3

您可以使用CSS伪类:last-of-type：

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

jsfiddle：https://jsfiddle.net/y21qL8jz/

Answer 4

这是您要问的一个示例，我想看看要在最后放置div的结果，请删除div，您会发现它不影响跨度，您可以将模板放在跨度上在CSS中，删除并添加div以查看结果

.container > *:last-child:not(span) {
  font-size: 48px;
  color:red;
}

<div class="container">
  <div>Child 1</div>
  <div>Child 2</div>
  <span>Child 3</span>
  <div>Child 2</div>
  <span>Child 4</span>
  <br>
  <span>dwdw</span>
  <div>atul</div>
</div>

Answer 5

您可以尝试：

span:last-of-type {
  color:red;
}

CSS-将样式应用于不是特定类型的最后一个元素

问题

示例

我尝试了什么（没用）

编辑-似乎我的问题是抽象的，所以我会更具体。

5 个答案: