CSS first-child, last-child 失效、無作用問題|first-of-type, last-of-type|伊恩踩坑筆記
Nov 21, 2023
若父元素底下有參雜目標元素以外的其他參數,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/