使用 :first-child 設定第一列視覺 | 點燈坊

當使用 List 顯示資料時，若想對第一列設定不同視覺，可使用 :first-child 達成。

Version

CSS 3

Parent Node

第一列以灰底加以區別。

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul :first-child {
  background-color: lightgray;
}
</style>

第 2 行

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

使用 <ul> 與 <li> 顯示資料。

10 行

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

• list-style: none：使用 none 使 <ul> 不顯示 bullet
• margin: 0：將 margin reset 為 0
• padding: 0：將 margin reset 為 0

16 行

ul :first-child {
  background-color: lightgray;
}

:first-child 若要套用在 parent node，則 ul 與 :first-child 之間需要有空格。

Child Node

結果不變，但使用 child node 改寫。

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li:first-child {
  background-color: lightgray;
}
</style>

16 行

li:first-child {
  background-color: lightgray;
}

:first-child 若要套用在 child node，則 li 與 :first-child 之間沒有空格。

Conclusion

• 亦可使用 :nth-child(1)，但 first-child 較精簡

Reference

MDN, :first-child