赞同 2
分享
刷新

CSS选择同层级标签修改样式

2020-06-21 Bug Man 2 74
简介：css样式选择器突然卡住，找个所有选择链接记录一下。
  2020.06.21
  Bug Man
  2
  74
  172.17.0.1
  中国.上海
 
 

刚才加了鼠标hover显示一个微信二维码的功能，太久没有去看css的样式选择器了，不知道怎么去写这个样式的选择。

w3school CSS 样式选择器文档

我们最常用的选择器一般都是通过父级标签先后选择的后代选择器，在使用到hover里面更是这样。但在很多时候比如说我们的父级标签是a标签，你再在a这样的行内元素里面写一个div的块级元素这样可以但不合理，所以我们把div放到a同一层级比较好。

<style>
    /** box_1后面的的标签 **/
    #box_1:hover + #box_2 {
        background-color: greenyellow;
    }
</style>

<div id="box_1">
    这是第一个盒子
</div>
<div id="box_2">
    这是第二个盒子: 我绿了,荧光绿！
</div>