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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料