项目场景：

这篇博客是在做《生活资讯网》项目是遇到的一个问题，是关于伪类的一个知识点的应用。

问题描述：

我们有时候会对一个元素使用:link :visited :hover :active选择器，设置它们的样式：或者通过这个元素来对另外一个元素设置样式。这个项目里面就用到A元素去设置B元素的样式但是根据正常的css写法，它实现不了效果。

解决方案：

/*----主体部分----*/
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
    </div>
</body>

第一种情况：

对元素使用伪类来设置自己样式。

<style>
    .box1:hover {
    
    
            /* 当鼠标滑过的时候，盒子box1从原本的颜色变成蓝色blue */
            background-color: blue;
        }
</style>

第二种情况：

通过对A元素使用伪类来设置B元素的的样式。

这种情况有两种情况，就是我做项目时候，一开始没有思考到的地方，以至于卡了很久。
这里的两种情况是根据A元素和B元素关系来区分的。
一种是父子（包含关系）。
一种是兄弟关系。

第一种：父子关系

当hover的元素和需要改变样式的元素是父子关系的时候，可以这么写（.container:hover ul.ul>li:nth-child(2)）直接在hover后面加上空格，加上需要改变你的元素

<style>

     /*通过给父盒子box设置伪类hover，隐藏他的子元素box2*/
     .box:hover .box2 {
    
    
             display: none;
        }
    
     /*通过给父盒子box设置伪类hover，让他的子元素box3的背景颜色变为绿色green*/
     .box:hover .box3 {
    
    
            background-color: green;
        }
</style>

第二种：兄弟关系

当hover的元素和需要改变样式的元素是兄弟关系的时候，可以这么写（.container:hover +.wrap{background:#f00;}）直接在hover后面加上+，加上需要改变你的元素

<style>

     /* .box1和.box2是相邻兄弟关系。通过给.box1设置伪类hover，让.box1隐藏 */
     .box1:hover+.box2 {
    
    
            display: block;
         }
          
     /* .box1和.box2是不相邻的兄弟关系。通过给.box1设置伪类hover，让.box5背景颜色变为绿色green */  
     /* 注意*/
     .box1:hover+.box2+.box3+.box4+.box5 {
    
    
            background-color: green;
        }
       
</style>

相关知识补充

CSS中伪类及伪元素用法详解

1.伪类的分类及作用：
在这里插入图片描述

2.伪元素的分类及作用：

在这里插入图片描述

css选择符

(空格) 后代

     1. 选择器优先级相同，后来居上
     2.document.querySelector('#myId').querySelectorAll(':scope div div')

>子

  1. 主要目的：避免冲突
  2.场景：状态类名控制、标签受限、层级位置与动态判断

相邻
```
 1. 为兼容IE8实现:first-child
```

~ 随后

 1. 随前实现：视觉在前，dom在后

||列
```
 1. 跨列td选择
```