主页 / 问题 / 1606130
Accepted
Max
Asked:2025-02-03 00:50:12 +0000 UTC2025-02-03 00:50:12 +0000 UTC

父级的任何最后一个子元素的 css 样式[关闭]

  • 772

.column:last-child不起作用，因为此类元素之前有另一个类的元素：

<div class="wrapper">
    <div class="row"></div>
    <div class="column"></div>
    <div class="column"></div> <!-- margin-bottom: 0; -->
</div>

如何使用CSS实现？

css

2 个回答

  1. 好吧，一切都很好，但为了以防万一，我提出了一些替代方案

    .wrapper>* {
  border: 3px solid black;
  background: lightgray;
  font-size: 50px;
}

.column:last-of-type {
  border: 3px solid red;
}

.column:last-child {
  background: pink;
}

.column:nth-last-child(1) {
  color: darkviolet;
}
    <div class="wrapper">
  <div class="row">1</div>
  <div class="column">2</div>
  <div class="column">3</div><!-- margin-bottom: 0; -->
</div>

    检查你的风格与布局。

    从一开始就以更完整的形式添加它们会很好。如果没有他们，在场的人肯定没有机会做任何事情，除了猜测那里发生了什么：

    • 也许浏览器出了问题
    • 可能未指定所有标签
    • 也许某些选择器根本就不重要。
    • 也许只是星星没有排成一行 :3
    • 2
  2. Best Answer

    使用:last-of-type

    .column:last-of-type {
  border: 1px solid red;
}
    <div class="wrapper">
    <div class="row">1</div>
    <div class="column">2</div>
    <div class="column">3</div> <!-- margin-bottom: 0; -->
</div>

    • 1

相关问题