CSS first-child, last-child 失效、無作用問題｜first-of-type, last-of-type｜伊恩踩坑筆記

Source: https://cronuts.digital/en/what-is/css/

若父元素底下有參雜目標元素以外的其他參數，first-child 、 last-child 不會有作用

<div id="container">
  <p>p</p>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <p>p</p>
</div>

<style lang="scss">
#container {
  .item:first-child {
    color: red;
  }
  .item:last-child {
    color: green;
  }
}
</style>

解決方法一：去除其他元素

<div id="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>

<style lang="scss">
#container {
  .item:first-child {
    color: red;
  }
  .item:last-child {
    color: green;
  }
}
</style>

方法一效果

解決方法二：使用 first-of-type 、 last-of-type，忽略其他元素

<div id="container">
  <p>p1</p>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <p>p2</p>
</div>

<style lang="scss">
#container {
  .item:first-of-type {
    color: red;
  }
  .item:last-of-type {
    color: green;
  }
}
</style>

方法二效果

:first-child

父元素底下的第一個元素 ”不可以” 有其他元素存在，同理 :last-child

:first-of-type

父元素底下的第一個元素 ”可以” 有其他元素存在，同理 :last-of-type

ING Design 応設計
https://www.theingdesign.com/