CSS hover、focus 父对子、子对父、同级之间的控制

父级hover控制子级样式

html代码

<div class="div1">
   <h1>我是h1 1</h1>
   <h1>我是h1 2</h1>
   <p>我是无辜的</p>
 </div>

css代码

.div1:hover h1{
   color:red;
}

效果图

父级hover控制子级样式

兄弟元素hover控制同级元素两种方式

1. 用+号控制兄弟元素，但是只能控制一个元素，并且是相邻的后面的兄弟元素

html代码

<div class="div1"></div>
<div class="div2"></div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>

css代码

.div1:hover + div{
   color:red;
}

效果图

hover控制兄弟元素

2. 用~号来控制兄弟元素，可以控制后面的所有兄弟元素，不用是相邻的元素

html代码

<div class="div1"></div>
<div class="div2"></div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>

css代码

.div1:hover ~ p{
   color:red;
}

效果图

用~号来控制兄弟元素.png

如果想要子级hover或者focus控制父级元素的样式，用css是控制不了的，只能用js，一般只有input或者textarea等输入框标签才有focus伪类选择器，也有focus、blur事件，但是像div、p等标签是没有的，如果想要加上这种事件，需要在标签上加上tabindex;
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）

html代码

  <div class="div1">
    <h1>我是h1 1</h1>
    <h1>我是h1 2</h1>
    <p tabindex="1">我是无辜的</p>
  </div>
  <div class="div2">
    <h2>我是h2 1</h2>
    <h2>我是h2 2</h2>
  </div>

比如说有一个需求，需要第一个div里面的p标签focus的时候，第二个div改变样式，失去焦点的时候，第二个div再恢复原来的样式，如果用点击事件的话，就比较麻烦了，因为还有给document加上点击事件来给第二个div再恢复原来的样式，如果给p标签加上tabindex属性的话，就能用focus和blur事件，就很简单

js代码

  const p=document.querySelector("#p");
  const div=document.querySelector("#div");
  p.addEventListener("focus",()=>{
    div.style.border="1px solid red";
  });
  p.addEventListener("blur",()=>{
    div.style.border="none";
  });

focus控制父级或者别的元素