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选择器表，对应的版本也有标明。如有帮助，望不吝赐赞一枚，多谢，如有错误还望不吝指出。逃。