點燈坊

失くすものさえない今が強くなるチャンスよ

使用 nth-child() 設定黑白相間

Sam Xiao's Avatar 2021-05-05

當使用 List 顯示資料時，若想要資料能黑白相將方便顯示，可使用 :nth-child() 達成。

Version

CSS 3

Parent Node

:nth-child(odd)

odd000

奇數列會以灰底加以區別。

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

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

ul :nth-child(odd) {
  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 :nth-child(odd) {
  background-color: lightgray;
}

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

  • :nth-child(odd)：設定奇數列以 lightgray 顯示

nth-child(even)

odd001

偶數列會以灰底加以區別。

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

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

ul :nth-child(even) {
  background-color: lightgray;
}
</style>

16 行

ul :nth-child(even) {
  background-color: lightgray;
}

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

  • nth-child(even)：設定偶數列以 lightgray 顯示

Child Node

:nth-child(odd)

odd000

奇數列會以灰底加以區別，但使用 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:nth-child(odd) {
  background-color: lightgray;
}
</style>

16 行

li:nth-child(odd) {
  background-color: lightgray;
}

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

  • :nth-child(odd)：設定奇數列以 lightgray 顯示

:nth-child(even)

odd001

偶數列會以灰底加以區別，但使用 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:nth-child(even) {
  background-color: lightgray;
}
</style>

16 行

li:nth-child(even) {
  background-color: lightgray;
}

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

  • nth-child(even)：設定偶數列以 lightgray 顯示

Conclusion

  • :nth-child() 是以 1 開始，與 JavaScript 以 0 開始不同

Reference

MDN, :nth-child()

# CSS