在開發公司網站新頁面時發現了一件很有趣的事情，原本左右有間隔的商品之間突然沒有間隔了，然而其他頁面是正常的。如下圖所示：先看css的部分
原本藍色旁邊的白邊應該在中間，包含藍色部分的item中有個class叫做bar，熟悉CSS的人都知道CSS的順序是從1開始而不是0，正常來說應該會在右邊，於是藍色方塊的順序變成了左邊是奇數右邊是偶數項。
來看一下結構的部分：
其中item red為最上面的紅色部分，與藍色部分的item區塊為同級，初步猜測它也列入計算而使藍色的奇偶項平移了。
demo網址：https://codepen.io/vojqyqsh/pen/RwKdEMP
後來我做了一點變動，我創了一個container2來包那些class帶有bar的item，就正常了。
來看結構的部分：
這次多了一個container2來包其他的藍色item，使紅色的區塊與藍色區塊不同級，問題解決。
demo網址：https://codepen.io/vojqyqsh/pen/zYNbyXb
結論：
原本以為nth-of-type可以只抓帶有某class的第n個，根據以上範例來說與藍色物件同級的紅色元素似乎也會被參考進去。
然後我就查了一下w3cshool的敘述：
nth-of-type計算依照同級元素，前面接classname也是照著type去計算，而紅色區塊與藍色區塊classname不同，type一樣是div。
網址：https://www.w3schools.com/cssref/sel_nth-of-type.asp
如果有甚麼想法或是覺得說的不對的歡迎開鞭。