CSS代码：/*设置span的默认样式*/.show{color:red;background-color:#bfa;}/*当鼠标移入.show时，样式变为小手*/.show:hover{cursor:pointer;}/*目的：当鼠标移入.show时，显示.box2*/.show的内容：hover~.box1>.box2{height:100px;cursor:pointer;}/*当鼠标移出.show时，下拉内容仍然显示*//*为.box2设置样式，此时选择器优先级为10+10=20*/。box2:hover{高度:100px;游标：指针；background-color:rgb(190,190,236);}/*默认情况下.box2的高度为0，溢出的内容被裁掉*//*设置.box2的样式，以及选择器的优先级此时就是10+10=20*/.box1.box2{height:0;溢出：隐藏；background-color:orange;}效果（意想不到的效果）：预期效果：2.问题分析关于意想不到的效果的实现，首先要详细说明一下实现效果的关键步骤：当鼠标移入跨度文本区域“我是一个方框”，下拉层会弹出，当鼠标移出跨度时，下拉层会继续显示。这就要求hover不仅可以设置在span上，还可以设置到下拉层本身。当设置为下拉层本身的box2的某些属性被覆盖时，就会出现问题。/*当鼠标移出.show时，下拉内容仍然显示*//*设置.box2的样式，选择器的优先级为10+10=20*/.box2:hover{height:100px;游标：指针；background-color:rgb(190,190,236);}/*默认.box2的高度为0，裁剪掉溢出的内容*//*设置.box2的样式，选择器优先级为10+10=20*/.box1.box2{高度：0;溢出：隐藏；background-color:orange;}当代码序列如上设置时，经过分析，上面样式表的选择器优先级是20，而下面的选择器优先级也是20，即有样式集对于一个对象（元素），优先级是相等的。根据优先原则（最近原则），后写的样式表会被优先使用。模拟过程：一开始height:0，overflow:hidden，元素不显示，自然也就没有颜色orange，鼠标移进去的时候使用样式表（hover），height:0的值为此时使用，这个值和后面的0冲突，使用下面代码的值，所以高度还是0，overflow:hidden，元素不显示。这将导致鼠标移出box2元素或不显示。把代码顺序倒过来，再看预期效果代码：/*默认情况下，.box2的高度为0，裁剪掉溢出的内容*//*为.box2设置样式，选择器优先级此时就是10+10=20*/.box1.box2{height:0;宽度：100px；溢出：隐藏；background-color:orange;}/*当鼠标移出.show时，下拉内容仍然显示*//*为.box2设置样式，此时选择浏览器的优先级为10+10=20*/.box2:hover{高度:100px;游标：指针；background-color:rgb(190,190,236);}模拟过程：同样先拿下面的样式表，由于hover没有启用（只有鼠标移进去才启用），默认设置.box1，box2被启用，所以此时height的值为0。当鼠标移入，此时启用悬停，height:100px生效，因为是后面的代码，优先级高，所以使用这个值，元素显示有效。3.问题解决把:hover伪类的样式表放在后面/*默认情况下，.box2的高度为0，裁剪掉溢出的内容*//*为.box2设置样式，选择器优先级是10+10=20*/.box1.box2{高度：0;宽度：100px；溢出：隐藏；background-color:orange;}/*当鼠标移出.show时，下拉内容仍然显示*//*为.box2设置样式，此时选择器优先级为10+10=20*/.box2:hover{高度:100px;游标：指针；background-color:rgb(190,190,236);}对于这样的场景需求，首先调整优先级，如果优先级相同，伪类：hover的样式表会放在后面。总结分析：关于这个问题，主要问题不是优先级问题会不会踩坑，而是样式表什么时候生效。错误的想法是：“当鼠标移入:hover时，下面的默认样式表不需要考虑，也不需要和下面的height:0比较。”容易忽略的是伪类:hover和其他选择器可以独立处理："由于:hover只在鼠标移入时生效，所以它可以在鼠标移入时生效，而不考虑任何优先级。”其实优先级是一样的原理，当有冲突的时候，需要做出取舍，关键是样式表的生效时间，就是：hover只有当鼠标移进去的时候才生效，而stylesheet代码也生效了，这时候就出现了样式值的冲突，并不是一开始就有冲突的。所以并不是说当鼠标移进来的时候，伪类选择器的style会取直接生效。注意状态的区别：伪类选择器处于非默认状态，样式表的值只有在伪类生效时才生效。一般选择器是默认状态，即,设置后会立即生效??也说明选择器不是选择元素，而是选择某种状态下的元素，即如果元素有默认样式，则有默认状态。更接近点，选择器选择状态，状态是“可选的”，因为元素都是一样的。这里的case是错误的，让我体会到默认状态和非默认状态是有区别的，对选择器的“选择”有了更进一步的理解。优先级是当有冲突的时候，需要考虑优先级（比如正确代码的最后一个样式表，伪类一开始就不会和其他样式表冲突，即使伪类优先级高，不会选择height:100px，使用伪类时，值生效，值冲突）。Rememberthatwhentheselectorisactive,thevalueisactiveandtheeffectisactive.相关文章：CSS选择器优先级（精读版）CSS选择器优先级汇总-wanglehui-博客园优先级-CSS(CascadingStyleSheets)|MDN