nth類型的奇數/偶數不按預期方式工作

如果我刪除第一個div，它可以很好地工作。nth類型的奇數/偶數不按預期方式工作

但是，如果我有沒有類的第一個div，它不能正常工作。

測試1應該是藍色的，下一個測試應該是紅色的，依此類推。

當我有另一個div，它不能正常工作。我該如何解決這個問題？

.el:nth-of-type(odd) { 
 
    background-color: blue; 
 
} 
 
.el:nth-of-type(even) { 
 
    background-color: red; 
 
}

<div id="content"> 
 
    <div>nothing</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
</div>

來源

2016-09-28 waisie li

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107這其中也可能會回答你的問題 – Zim84

莫非你有一個可變數量的div，而頂部沒有el類？ – j08691

我怎麼解決這個問題呢？

將第一個div更改爲另一個元素，因此它被跳過nth-of-type。

.el:nth-of-type(odd) { 
 
    background-color: blue; 
 
} 
 
.el:nth-of-type(even) { 
 
    background-color: red; 
 
}

<div id="content"> 
 
    <span>nothing</span> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
</div>

來源

2016-09-28 20:25:56

你的具體情況，你可以簡單地逆轉爲奇數和偶數第n-的類型（參見段）的CSS規則。 n-th-of-type引用標籤，即div元素，而不是類，因此也計算沒有類的第一個div。

由於您的CSS規則選擇器將類與第n個類組合在一起，所以第一個div不受影響，因爲它沒有類，但是奇數或偶數的計數在第一個div開始。

.el:nth-of-type(odd) { 
 
\t background-color: red; 
 
} 
 

 
.el:nth-of-type(even) { 
 
\t background-color: blue; 
 
}

<div id="content"> 
 
    <div>nothing</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    <div class="el">Test 1</div> 
 
    </div>

來源

2016-09-28 20:33:34 Johannes

nth類型的奇數/偶數不按預期方式工作

回答

相關問題