层叠样式(+)

<div className='example'>
  <ul>
    <li><button>1</button></li>
    <li>
      <button>2</button>
      <ul>
        <li><button>3</button></li>
        <li><button>4</button></li>
      </ul>
    </li>
  </ul>
</div>

比如有上面一段代码，假设我们为button设置一个悬停事件，并且下面的元素改变元素。

div.example li button:hover + ul {
  background-color: red;
}

尝试之后发现，把按钮放在第二个按钮上，下面的ul元素背景会变成红色。

需要注意的点是： +不可以阻隔其他元素。可以参考这里