CSS筆記 :hover改變另外一個元素樣式

寫在前面

近日，在作項目的時候遇到一個需求：

鼠標懸停在A元素時，改變B元素樣式

顯然，是要用到:hover來寫，但應用的場景有點小講究，分爲兩種情形。

情景1：A元素是B元素的父級

//情景1
<div class="A">
  <div class="B"></div>
</div>

A:hover B{
  //鼠標通過A元素時，B元素背景會變成黑色
  background:#000;
}

情景2：A元素與B元素相鄰且A緊接着B

若是B元素在A元素以前，是沒法使用+選擇符的

//情景2
<div class="A"></div>
<div class="B"></div>

A:hover +B {
  //鼠標通過A元素時，B元素背景會變成黑色
  background:#000;
}

CSS選擇器表

最後，這是目前的CSS選擇器表，對應的版本也有標明。若有幫助，望不吝賜贊一枚，多謝，若有錯誤還望不吝指出。逃。