假設有個頁面是這樣
第一排
<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
只是我這樣寫ＣＳＳ的話
上面第一排會吃到 last:child 的值
第三排也會吃到 last:child 的值
但預期結果是要吃到 first:child 才對
請問是哪裡設定錯了嗎？搞老半天
已邀請的邦友 {{ invite_list.length }}/5
第一排沒看到像你說的有
a:last-child
的值阿
另外
你說的 排 跟 區塊
是指同一種東西嗎
還是你指的是第二排的第一個 <div>
要有 first-child 的屬性
第二排的最後一個<div> 要有 last-child 的屬性這樣
是的話
還不如用個<div>
把你所謂的排放進去
再用 first-child, last-child
去決定你要的 margin
只有單個的話
可以用 only-child
這三排都是個別的資料，但是都是用同一個 class，所以我不知道他是不是沒辦法判斷哪個是第一個哪個是最後一個。。。
所以外面必須要包一個 row > 嗎？
你可以看我的那個codepen
是不是你要的效果
因為你給的 code 來說
他們都是同一個 parent
理所當然
第一排就是所謂的 first-child
第三排就是所謂的 last-child
以上是我的理解~
了解
ＲＯＷ的做用是告訴他每一排都是新的意思？
應該是說把你所謂的排視同一個區塊
讓你所謂的排有同一個 parent
再用 css 到其中去找
first-child
last-child
關鍵是，.a:first-child必須是parent之下的第一個child且class="a"，不是在parent之下class="a"的第一個child，last-child也一樣狀況。
了解，所以要先讓每一排都有一個parent
算對一半吧...
就像 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 那個結果
我發現你的ＣＯＤＥＰＥＮ裡面也是有一樣的問題耶
第一個跟最後一個都是吃到 margin 10px的
我在 .row > .a { 加了 display:inline-block 後，第一個跟第三個應該要跟第二個一樣是吃到 20px 的
哪裡的第一個跟最後一個呢?
如果你指的是第一排或第三排的話
他是抓 only-child
所以本來就是 margin 10px的
如果你是說第二排的話
他是套用 first-child 跟 last-child 沒錯阿 
應該是說第一排跟第三排只有一個
因此想讓他跟「第二排的第一個」一樣靠左20px
第二排是沒問題的
第一個靠左20px，其餘間隔10px，最後一個靠右20px
所以有辦法讓第一排跟第三排吃到 first-child 嗎？（如果該排只有一個 ＤＩＶ）
iThome鐵人賽
看影片追技術