成長是一輩子的事兒！大家好！我是時問新。分享前端、Python等技術，以及個人成長路上的那些事兒。
元素關係選擇器
元素關係選擇器有三個：子選擇器、相鄰兄弟選擇器、通用兄弟選擇器。
比如上圖所示的例子，一看就明白了。
子選擇器用大於號>，相鄰兄弟選擇器用加號+，通用兄弟選擇器用破浪線符號~。
子選擇器
子選擇器，顧名思義，兩個標籤是父子關係。
當使用大於號>分隔兩個元素時，就表示第一個元素是父標籤，第二個元素是子標籤。
簡單地說，子選擇器的形式就是a>b，a+b選擇的就是a後面的b。
注意
：
1。子選擇器選擇的是直接的“兒子”，而後代選擇器選擇的元素，可以是“兒子”，也可以是“孫子”等等，只要是後代都可以。
2。子選擇器最標準的寫法，前後兩個元素和大於號都是緊鄰的，沒有空格。當然，如果你要寫空格，也不會錯，當你進行程式碼格式化的時候，就會自動把空格去掉。
比如下面的程式碼：
在上面的程式碼的HTML結構中，類名為box的div標籤中，有兩個p元素是它的直接子元素，還有一個div也是它的直接子元素，在這個div中，又有兩個p元素，這兩個p元素就相當於它的“孫子”。還有兩個p元素，和類名為box的div是兄弟關係。
子選擇器從ie7開始相容，相容性是很好的。基本上現在使用ie7瀏覽器的人，應該很少了。
相鄰兄弟選擇器
相鄰兄弟選擇器是兩個選擇器之間使用加號+，並且這兩個選擇器屬於同一個父元素的子元素。
簡單的說，相鄰兄弟選擇器的形式就是a+b，a+b選擇的是a後面的b。
比如下面的程式碼：
上面的程式碼的HTML結構中，
第一個p元素的子元素有三個，分別是一個img元素，兩個span元素。
第二個p元素的子元素有兩個，分別是一個img元素，一個span元素。
最後面的兩個span元素是這兩個p元素的兄弟元素。
那麼img+span這個相鄰兄弟選擇器，選擇的就是img元素後面緊跟著的一個span元素，其他的span元素不會被選擇。
相鄰兄弟選擇器也是從ie7開始相容。
通用兄弟選擇器
通用兄弟選擇器的形式是a~b，表示選擇a之後的所有同層級的b。
比如下面的程式碼：
h3~span選擇的是h3標籤後面的同層級的span，注意一定得是同層級的，不是同層級的話，就不是兄弟關係了。
在上面程式碼的HTML結構中，
h3前面有一個span，就不會被選擇。
h3後面的三個span，跟這個h3是同層級，所以會被選擇。
三個span後面隔了一個p，然後又跟了兩個span，
這兩個span跟h3也是同層級的，所以會被選擇。
最後面的div裡面的兩個span，就不會被選擇，因為跟h3不是同層級。
通用兄弟選擇器也是從ie7開始相容。
關於這三種元素關係選擇器，我就不在vscode和瀏覽器中進行演示，因為前面的知識總結和程式碼例項，我都做了清楚的說明，就不需要再做過多的解釋。
要把知識點講的讓人看明白也不容易，再加上排版、demo演示非常耗費時間。
對於有些我覺得沒必要演示的，我就不演示了。
你可以自己寫寫程式碼，驗證一下效果，理解會更深一些。
感謝閱讀！知識總結不易，請點個贊或轉發鼓勵一下唄！想系統性學習前端的小夥伴可以關注我！
溫馨提示：我在頭條關於前端的圖文，都是成體系的，如果是沒接觸過前端，對前端感興趣、想要學習前端的小夥伴，要按順序從第一節去看，更重要的是要動手實踐。
