iT邦幫忙

1

first 與 last child 的使用

假設有個頁面是這樣

第一排
<div class="a"></div>

第二排
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

第三排
<div class="a"></div>

以上資料是迴圈

css

.a {
    width: 200px;
    margin: 0 0 0 10px;
  }
  .a:first-child {
    margin: 0 0 0 20px;
  }
  .a:last-child {
    margin: 0 20px 0 10px;
  }

我想做到的是
第一個區塊會間隔邊邊20px
最後一個區塊間隔邊邊20px
而中間的都是互相間隔10px
只是我這樣寫CSS的話
上面第一排會吃到 last:child 的值
第三排也會吃到 last:child 的值
但預期結果是要吃到 first:child 才對
請問是哪裡設定錯了嗎?搞老半天

ccutmis iT邦高手 8 級 ‧ 2019-06-25 22:48:13 檢舉
.a:nth-child(1) {margin: 0 0 0 20px;}
.a:nth-last-child(1) {margin: 0 20px 0 10px;}
小魚 iT邦大師 1 級 ‧ 2019-06-25 23:07:06 檢舉
我猜想,
你寫的應該不完整...
froce iT邦大師 3 級 ‧ 2019-06-26 08:06:39 檢舉
...我真的覺得你是不是該好好充實一下自己了。
你前端也會問些很基本的問題,後端也會...

1 個回答

3
dragonH
iT邦大師 1 級 ‧ 2019-06-25 22:53:32
最佳解答

codepen

第一排沒看到像你說的有

a:last-child

的值阿

另外

你說的 排 跟 區塊

是指同一種東西嗎

還是你指的是第二排的第一個 <div>

要有 first-child 的屬性

第二排的最後一個<div> 要有 last-child 的屬性這樣

是的話

還不如用個<div>

把你所謂的排放進去

再用 first-child, last-child

去決定你要的 margin

只有單個的話

可以用 only-child

看更多先前的回應...收起先前的回應...
小松 Nana iT邦研究生 3 級 ‧ 2019-06-25 23:45:05 檢舉

這三排都是個別的資料,但是都是用同一個 class,所以我不知道他是不是沒辦法判斷哪個是第一個哪個是最後一個。。。

小松 Nana iT邦研究生 3 級 ‧ 2019-06-25 23:46:14 檢舉

所以外面必須要包一個 row > 嗎?

dragonH iT邦大師 1 級 ‧ 2019-06-25 23:50:03 檢舉

你可以看我的那個codepen

是不是你要的效果


因為你給的 code 來說

他們都是同一個 parent

理所當然

第一排就是所謂的 first-child

第三排就是所謂的 last-child

以上是我的理解~

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 00:46:42 檢舉

了解
ROW的做用是告訴他每一排都是新的意思?

dragonH iT邦大師 1 級 ‧ 2019-06-26 09:03:50 檢舉

應該是說把你所謂的排視同一個區塊

讓你所謂的排有同一個 parent

再用 css 到其中去找

first-child

last-child

fillano iT邦超人 1 級 ‧ 2019-06-26 09:28:48 檢舉

關鍵是,.a:first-child必須是parent之下的第一個child且class="a",不是在parent之下class="a"的第一個child,last-child也一樣狀況。

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 11:44:05 檢舉

了解,所以要先讓每一排都有一個parent

dragonH iT邦大師 1 級 ‧ 2019-06-26 11:52:03 檢舉

算對一半吧...

就像 fillano 大說的

.a:first-child必須是parent之下的第一個child且class="a"

你一開始的寫法也有 parent

我沒猜錯的話就是 <body>

<body>
    第一排
    <div class="a"></div>

    第二排
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    第三排
    <div class="a"></div>
</body>

所以當你用 first-child 去 filter 時

可以視同為

在 parent(body) 之下找到第一個 child 且 class = "a"

找到的也就是你所謂的第一排

而我上述的寫法

是把你所謂的排

放到一個 class name 為 "row" 的 div

第一排
<div class = "row">
    <div class="a"></div>
</div>

第二排
<div class = "row">
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
</div>
第三排
<div class = "row">
    <div class="a"></div>  
</div>

所以用 .row > .a:first-child 去 filter 時

就可以理解成

在 parent(row) 之下找到第一個 child 且 class = "a"

最後就是 codepen 那個結果

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 13:38:36 檢舉

我發現你的CODEPEN裡面也是有一樣的問題耶
第一個跟最後一個都是吃到 margin 10px的

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 13:39:45 檢舉

我在 .row > .a { 加了 display:inline-block 後,第一個跟第三個應該要跟第二個一樣是吃到 20px 的

dragonH iT邦大師 1 級 ‧ 2019-06-26 13:43:57 檢舉

小松菜奈

哪裡的第一個跟最後一個呢?

如果你指的是第一排或第三排的話

他是抓 only-child

所以本來就是 margin 10px的

如果你是說第二排的話

他是套用 first-child 跟 last-child 沒錯阿 /images/emoticon/emoticon19.gif

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 14:07:39 檢舉

應該是說第一排跟第三排只有一個
因此想讓他跟「第二排的第一個」一樣靠左20px

第二排是沒問題的
第一個靠左20px,其餘間隔10px,最後一個靠右20px

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 14:08:38 檢舉

所以有辦法讓第一排跟第三排吃到 first-child 嗎?(如果該排只有一個 DIV)

dragonH iT邦大師 1 級 ‧ 2019-06-26 14:10:49 檢舉

小松菜奈

既然知道只有一個 <div>

那你把 .row > .a:only-child 改成

margin: 0 0 0 20px;

不就好了

(本日留言次數已用完 不能回了 /images/emoticon/emoticon11.gif


↙我回答一開始就有用 only-child 的說/images/emoticon/emoticon02.gif

小松 Nana iT邦研究生 3 級 ‧ 2019-06-26 14:20:28 檢舉

感謝~~~~
第一次看到:only-child

小魚 iT邦大師 1 級 ‧ 2019-06-26 15:29:29 檢舉

@dragonH
你快升到研究生了,
限制應該就會放寬了,
我已經很久沒遇到限制了,
不知道是不是已經沒有限制了...

我要發表回答

立即登入回答