CSS 選取同層偶數元素，當 nth-child(even) 不起作用

在編輯網頁的時候很常會遇到這種情況，讓單數列與偶數列交錯，這次修改HTML不是我自己產生的，是由WordPress產生的，因此要透過CSS選擇器選取偶數列，將偶數的欄反轉，HTML結構大致如下，內容我省略

HTML:

<div>
    <div class="aaa">...</div>
    <style></style>
    <div class="aaa">...</div>
    <style></style>
    <div class="aaa">...</div>
    <style></style>
    <div class="aaa">...</div>
    <style></style>
    <div class="aaa">...</div>
</div>

CSS:

div.aaa:nth-child(even) {
  /* CSS 樣式 */
}

上述CSS不起作用，有點納悶查了一下，改用下列方法，就成功了

div.aaa:nth-of-type(even) {
  /* CSS 樣式 */
}

有遇到這問題的朋友可以試試看喔

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包：

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs

ann71727

View all posts