版權聲明：此部落格轉自“一個不想上班的程式員”部落客原創文章，遵循 CC 4.0 BY-SA 版權協定，轉載請附上原文出處連結和本聲明。
其原文連結：http://blog.csdn.net/eden00/article/details/105279921
記錄此部落格僅用于學習記錄
前言
最近在項目中用到 :first-child 很容易的就想到了，嗯嗯。這不就是選擇第一個元素嗎？
好像很好用，平時使用中也沒有遇到什麼問題，理所當然的就以為它隻會選中父元素下的第一個元素，對孫元素和曾孫元素沒有影響。事實證明，我的理所當然是錯的。
E:first-child的第一個誤區（隻會選中我規定的區域中的一個，不會周遊其下有多少個孫或曾孫元素）
上面的代碼真的是隻會有一個p标簽生效嗎？
這是後就已經犯了我們常見的第一個誤區，認為body p:first-child選中的就是第一個元素。
其實，隻要在我們選中的body這一塊中，如果這個p在其父元素中屬于第一個，那它就被選中。
E:first-child的第二個誤區（不管這個E元素前面有幾個兄弟，隻要我是第一個E元素，那我就會生效）
還是上面的代碼，但是我們在body中的p标簽前加了一個font标簽，發現p已經失效了。
上面的兩個例子已經很清楚的告訴我們了這個選擇器到底應該怎麼用
E:first-child 用于選取屬于其父元素的首個子元素的指定選擇器
如何隻選擇指定元素中子元素呢？不考慮膝下有多少個孫子和曾孫呢。
子選擇器(>) :隻能選擇作為某元素兒子元素的元素（直接子元素），不包括孫元素、曾孫元素等等等
還拿上面的代碼舉例，将>添上試一下效果
有時候使用錯誤的選擇器，卻沒有報錯。但錯了就是錯了。總有被發現的時候。
很慶幸這次的錯誤讓我學到了知識。
本人個人實踐
如果不用子選擇器（>)的話
得到的結果就是兩個svg都變成了同樣的大小
最後通過上述部落客的指導，明白需要使用子選擇器(>)
最終實作指定第一個svg大小為35px
個人總結：在使用:first-child時，在左邊使用子選擇器（>）