像這樣的奇偶行背景色不同的代碼塊效果是怎樣設置的?

01-14

像這樣的奇偶行背景色不同的代碼塊效果是怎樣設置的?

在&<&&>的第5章關於字體排印中有講如何使用CSS實現這個效果.

重點在於linear-gradient和background-origin.

以下是代碼和最終效果的截圖,更詳細的講解可以去看這本書:)

文本框樣式

最終效果

li:nth-child(2n){color:#f00;} /* 偶數 */ li:nth-child(2n+1){color:#000;} /* 奇數 */

這個用MVVM很輕鬆搞定

```html

{{el.text}}&

```

這是avalon的代碼，改成vue, angular差不了多少

對於隔行變色，我目前主要使用兩種方法:

1.使用css3里的奇偶選擇器

:nth-child(odd/even)

2.使用JS,獲取表格或者列表的長度，進行奇偶判斷，再設置顏色

var tr = document.getElementsByTagName("tr")

for(var i = 0; i &< tr.length; i++) {

if(i%2 ==0) {

tr[i].style.backgrounndColor = "#ccc";

}

li:nth-child(odd){ background-color:#666; } li:nth-child(even) { background-color:#fff; }

既然是代碼塊的話... 就沒那麼好搞了..

弄line-height和background或許是最好的實現方式

nth-child

我覺得題主可能是想問，在編輯器中怎麼實現的，而不是怎麼用css實現的

可能我也理解錯了

parentElem elem:nth-child(odd)和(even)