Question

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

这就是我要删除footer-content之后的最后一个-的样子

我已经尝试过了

risk analysis

但这会隐藏所有span标签

Answer 1

编辑：要在条目之间创建破折号，而不是完全创建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;
}

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

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

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

我建议您这样更改它：

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

:last-child CSS伪类表示一组同级元素中的最后一个元素。

/* 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

Answer 2

那个选择器应该是

.footer-container :last-child :last-child { ... }

（.footer-container之后的空格）

Answer 3

我认为这应该对您有帮助

.footer-container .footer-content:last-child{
	background-color:red;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Css practice</title>

</head>
<body>
   
   <div class="footer-container">
	<div class="footer-content">
	<p><span>Section Number 1</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 2</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 3</span></p>
	</div>
	<div class="footer-content">
	<p><span>Section Number 4</span></p>
	</div>
	
   </div>
</body>
</html>

Answer 4

您可以添加：

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

根据 Q -我要删除风险分析后的最后一个

这对您来说很好。如果您更改:last-child中内容的顺序，这还将防止其他元素受.footer-content CSS选择的影响。

Answer 5

尝试一下：

.footer-container .footer-content:last-child span {
    /* css here */
}

Answer 6

此代码应该有效：

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

使用空格将所有的元素定位为内部 .footer-container:last-child的最后一个子元素，而使用>则将目标为仅.footer-container:last-child。

向最后一个孩子的最后一个孩子添加样式

6 个答案: