css表格各行顏色交替 tr:nth-child(odd)

阿新 • • 發佈：2019-01-18

你可以給標題所在行單獨設定顏色樣式。比如（假定標題在第一個tr標籤內）：
<style>
tr:nth-child(odd) {color:red} //奇數行（從標題行起算，下同）設為紅色
tr:nth-child(even) {color:blue} //偶數行設為藍色
tr:nth-child(1) {color:black} //第一行（標題行）設為黑色
</style>
<table border=1>
<tr><th>這是標題</th></tr>
<tr><td>這是第1行</td></tr>

<tr><td>這是第2行</td></tr>
<tr><td>這是第3行</td></tr>
<tr><td>這是第4行</td></tr>
<tr><td>這是第5行</td></tr>
<tr><td>這是第6行</td></tr>
<tr><td>這是第7行</td></tr>
<tr><td>這是第8行</td></tr>

</table>

css表格各行顏色交替 tr:nth-child(odd)

你可以給標題所在行單獨設定顏色樣式。比如（假定標題在第一個tr標籤內）：<style>tr:nth-child(odd) {color:red} //奇數行（從標題行起算，下同）設為紅色tr:nth-child(even) {color:blue} //偶數行設

CSS選取子標籤元素：nth-child、first-child、last-child

1、first-child first-child表示選擇列表中的第一個標籤。程式碼如下： li:first-child{background:#090} 上面的意思是，li 列表中的第一個li模組的背景顏色。 2、last-child last-child表示選擇列表中的最後一個標籤，程

CSS——選擇器（包括神器:nth-child）

1、基本的選擇器：通用元素選擇器——*{…} id選擇器(略) 類選擇器(略) 標籤選擇器——a{ color:xxx; } 2、組合型選擇器： A、同一級別多元素選擇器——使用”,”隔開。如：h1,a,div{…}，表示被h1標籤，a標籤及d

css3基礎 :nth-child(odd奇/even偶) 簡單示例

w3c oct 學習資源技術分享 eve back browser child src 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

CSS的nth-of-type和nth-child的區別

alt ctype nbsp str lan eight n+1 width lang <!DOCTYPE html> <html lang="en"> <head> <meta chars

CSS選取第幾個標籤元素：nth-child(n)、first-child、last-child

CSS選取第幾個標籤元素：nth-child(n)、first-child、last-child nth-child（n）、first-child、last-child用法注：nth-child(n)選擇器匹配父元素中的第n個子元素。 n可以是一個數字，一個關鍵字，或者一個

CSS偽類選擇器nth-child 和nth-of-type

首先要說明的一點是：css中的偽類選擇器還是少用為妙，複雜的css選擇器（層級關係較深，偽類等）的效能並不好，主要應該影響的還是瀏覽器渲染時候的迴流（reflow）和重繪（repain）的等的效能（個人理解）。然後要講正題啦！ nth-of-type和nth-child這兩個選

css偽類選擇器 nth-child( ) 使用

製作中遇到需求：點選“更多”按鈕展開標籤思路：使用css偽類nth-child（）選擇之後元素隱藏。以下蒐集關於nth-child用法： 1、正方向範圍 li:nth-child(n+5) 選中第5個及之後的元素 2、負方向範圍 li:n

css選擇器nth-child與nth-of-type的區別

例項例項1 選擇屬於父元素div的第三個子元素span，以及屬於父元素div的第六個子元素span。 <style> span:nth-child(3){ color: #ff0000; } span:nth

詳解CSS中:nth-child的用法

下面我將用幾個典型的例項來給大家講解:nth-child的實際用途： Tips：還用低版本的IE瀏覽器的哥們請繞過！ :nth-child(2)選取第幾個標籤，“2可以是你想要的數字” .demo01 li:nth-child(2){background:#090} :nth-c

:nth-child mask-image設定圖片顏色

<div class="yn-sd-home-nine"> <div class="yn-sd-home-nine-main" ng-click="gridClick('2')" >

css nth-child 的應用

最近改視訊監控頁面，由於視窗比較多，以前是通過計算視窗大小位置來處理頁面佈局的，其實還是比較麻煩，而且偶爾會有頁面位置錯亂的現象，雖然只是及其偶爾的現象，但總歸是不好。計算視窗位置的程式碼： /*監控視窗高度自動*/ web.gridHeight = function (num) {

CSS選取第幾個標籤元素：nth-child、first-child、last-child

1、first-child first-child表示選擇列表中的第一個標籤。程式碼如下： li:first-child{background:#090} 上面的意思是，li 列表中的第一個li模組的背景顏色。 2、last-child last-child表示選擇列表中的最後一個標籤，程

關於css選擇器中nth-of-type和nth-child的區別

前言今天學習了css選擇器，發現有兩個偽類nth-of-type和nth-child在功能上十分相似，卻又有不同的地方。但我發現無論是在MDN上，還是在w3school、菜鳥教程上，對這兩個偽類選擇器的對比說的都不是很明白。這篇文章就是對這兩個偽類的簡單探究

css學習選擇器之:nth-child(n)

今天新學習了一個小效果，網站比如說實現間行顏色變化，比如說一行黑，一行白，好吧，斑馬就出現了，當你滑鼠觸碰某一行，顏色背景變化，尤其是當你連線資料庫時，簡單的程式碼就顯得很重要了. 這時候一個有意思的朋友出現了，:nth-child(n) 一直在那蹦躂著說“找我呀”，這個

CSS3:nth-child()偽類選擇器，Table表格奇偶數行定義樣式

原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CS

CSS: nth-child()選擇前幾個元素

前言渲染列表時，需要設定前3個元素的margin-top值與其他的不同。使用 :nth-child(-n+3){ margin-top: 12px; } 擴充套件選擇前幾個元素 /*【負方向範圍】選擇第1個到第6個 */ :nth-chil

CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法

前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n

用CSS實現表格背景顏色漸變效果

用CSS實現表格背景顏色漸變效果 <style>td{text-align:center;color:white;"">宋體;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;wi

解決ie8 css :nth-child(3n) 不相容問題

個人是用jquery 做的在css中一般這樣寫 .css li:nth-child(3n){ width:300px; } 方法一：使用 + 來硬幹nth-child() 遇到IE7、IE8的時候可以這樣寫： .css >li+li+li{