文章彙整

使用CSS自動設定單偶數背景色

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  使用CSS自動設定單偶數背景色

00

在還沒有CSS3以前,CSS是無法加入判斷功能的,例如說今天要做的單數行背景顏色X色,偶數行背景顏色Y色,以前必須要靠別的程式輔助,例如PHP或是Javascript。

現在就介紹一個CSS3的新選擇器(Selector):nth-child()

例如:我們今天想要做,單數行的背景顏色綠色,偶數行的背景顏色橘色。

先來準備一些文字段落(p):

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<p>fff</p>
<p>ggg</p>

這時在網頁中顯示出來的效果就像這樣:
image00

再來就換CSS出場囉,先建立一個寫CSS的區域:

<style type="text/css">
之後從這邊開始加css
</style>

再開始加上今天的主角,先對文字段落(p)的單數行(odd)來設定背景顏色(background-color)為綠色,為了相對明顯,再設定文字顏色(color)為白色:

<style type="text/css">
p:nth-child(odd){
	background-color: green;
	color: white;
}
</style>

 

這時在網頁中顯示出來的效果就會變成:

image01

以下簡單說明語法的各項用途:

p:nth-child(odd)

p:前面是要設定的對象,今天是針對文字段落(p),例如如果改成table tr,那就變成是針對表格(table)中的單數行加背景顏色綠色了。

:nth-child(odd):這個語法可以想像成數個數,例如說如果我只想要第二行,那改成:nth-child(2)即可。
odd:可以改成任意數字,或是even(偶數)。

 

所以,最後最後,我們還想再加上偶數行背景色變橘色,文字…為了顯眼一點,就變紅色吧,因此再加上一段:

<style type="text/css">
p:nth-child(odd){
	background-color: green;
	color: white;
}
p:nth-child(even){
	background-color: orange;
	color: red;
}
</style>

 

這樣就可以達成我們今天想要的效果了:

image02

當然,利用這個寫法,只要你想,你可以設定不同的字型,字級,行距,就看個人需求了。

 

參考資源:

w3school-CSS3 :nth-child() Selector

 

歐斯瑞有限公司編寫製作

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。