时间戳

首页 > 解决方案 > 为最后一个孩子的最后一个孩子添加样式

html - 为最后一个孩子的最后一个孩子添加样式

问题描述

在此处输入图像描述

这是我的代码的图像。我有一个footer-container里面有几个footer-content类，每个类都包含一个<p>标签，然后是一个<span>标签。我想对span最后一个样式应用footer-content

-这就是我想删除最后一个的样子risk analysis 在此处输入图像描述

我试过这个

.footer-container:last-child :last-child { display: none; }

但这隐藏了所有跨度标签

标签： htmlcsscss-selectors

解决方案

编辑：要在您的条目之间创建这些破折号，而不是完全创建这些破折号span.footer-dash，您可以仅使用 CSS 来做到这一点：

.footer-content:not(:last-child) .footer-item::after { 
  content: "-";
  color: #666;
  padding: 0 20px;
}

根据需要应用样式。选择器确保没有在最后一个元素之后添加破折号，因此如果一开始不存在任何内容，则无需隐藏任何内容。

:last-child问我是我父母的最后一个孩子吗？，不是我的最后一个子元素是谁？（您的选择器建议您认为）。

所以要么使用后代选择器（空格）：

.footer-container :last-child :last-child  {
  display: none;
}

或在正确的子元素上使用它：

.footer-content:last-child :last-child  {
  display: none;
}

请注意，:last-child应该谨慎使用 of，因为它将您的内容与 DOM 结构紧密联系在一起（您可能希望稍后更改）。

我建议你像这样改变它：

.footer-content:last-child .footer-dash  {
  display: none;
}

:last-childCSS 伪类表示一组兄弟元素中的最后一个元素。

/* Selects any <p> that is the last element
   among its siblings */
p:last-child {
  color: lime;
}

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

推荐阅读