1. 问题形容

今日看web前端视频之小米官网实战案例,过程中有一个成果(下拉层),讲师解说时翻车了,最初讲师发现是css申明局部代码地位写反了,问题解决了,但暂停视频重复查看也不晓得具体清晰的起因,尽管成果上能够满足案例成果,但还是只知其一;不知其二,手足无措,本认为是哪些基础知识把握不牢,于是想着私下做一个demo钻研一下。对于根底阶段,任何问题,任何疑难都要尽可能的解决,不留纳闷。

本认为问题呈现在选择器方面,最初发现可能是某些原理之前了解错了,或者没有了解。明确之后,感觉对某些常识有了新的认知。

案例成果具体形容(简化)

HTML代码:

<div class="box">    <span class="show">我是box</span>    <div class="box1">        <div class="box2">           每个人都不得不面对这些问题。 在面对这种问题时， 在这种艰难的抉择下，自己思来想去，寝食难安。 非洲在不经意间这样说过，最灵繁的人也看不见本人的背脊。        </div>    </div></div>

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 {    height: 100px;    cursor: pointer;    background-color: rgb(190, 190, 236);}/* 默认时 .box2的高度为0,且裁剪溢出内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10 =20 */.box1 .box2 {    height: 0;    overflow: hidden;    background-color: orange;}

成果(非预期成果):

预期成果:

2. 问题剖析

对于实现非预期成果,首先须要论述一下要害一步,实现预期成果的需要:

当鼠标移入span文字区域“我是box”时,弹出下拉层,当鼠标移出span时,下拉层持续显示。这要求hover不能仅设置在span,还需设置给这个下拉层自身。问题呈现就呈现在设置给下拉层自身box2存在某些属性被笼罩了。

/* 当鼠标移出 .show外,仍显示下拉内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10=20 */.box2:hover {    height: 100px;    cursor: pointer;    background-color: rgb(190, 190, 236);}/* 默认时 .box2的高度为0,且裁剪溢出内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10 =20 */.box1 .box2 {    height: 0;    overflow: hidden;    background-color: orange;}

当代码程序设置如上,通过剖析,下面样式表的选择器优先级是20,而上面的选择器优先级也是20,即存在对一个对象(元素)设置款式,优先级相等,依据优先级准则(就近准则),优先应用前面编写的样式表。

模仿一下过程:

  1. 一开始height:0，overflow:hidden则元素不显示,天然没有色彩orange
  2. 当鼠标移入时才应用到样式表(hover),此时留神此时才应用height:0这个值,这个值和上面的0抵触了,应用前面的代码的值,所以heigh还是0,并且overflow:hidden,则元素不显示。

这样会导致鼠标移出box2元素还是不显示。

将代码调换程序,再看预期成果代码:

/* 默认时 .box2的高度为0,且裁剪溢出内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10 =20 */.box1 .box2 {    height: 0;    width: 100px;    overflow: hidden;    background-color: orange;}/* 当鼠标移出 .show外,仍显示下拉内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10=20 */.box2:hover {    height: 100px;    cursor: pointer;    background-color: rgb(190, 190, 236);}

模仿过程:

  1. 同样以上面的样式表为先,因为hover没有启用(只有鼠标移入才启用),而默认状态的设置.box1, box2被启用,所以此时height的值是0。
  2. 当鼠标移入时,此时的hover才启用,height:100px失效,因为是前面的代码,优先级高,所以采纳这个值,成果上,元素显示。

3. 问题解决

将:hover伪类的样式表搁置前面

/* 默认时 .box2的高度为0,且裁剪溢出内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10 =20 */.box1 .box2 {    height: 0;    width: 100px;    overflow: hidden;    background-color: orange;}/* 当鼠标移出 .show外,仍显示下拉内容 *//* 给 .box2设置款式,此时 选择器优先级是 10+10=20 */.box2:hover {    height: 100px;    cursor: pointer;    background-color: rgb(190, 190, 236);}

对于这样的场景需要,首先调整优先级,如果优先级一样,则将伪类:hover的样式表搁置前面的地位。

总结剖析:

对于这个问题,次要不是优先级问题会踩坑,而是样式表什么时候失效。

谬误的认为: “当鼠标移入:hover失效,则不必思考上面的默认样式表,不必和上面的height:0比拟”

容易漠视的中央是,认为伪类:hover和其余选择器能够独立解决: “既然:hover是鼠标移入才失效,那等到该移入的时候失效就能够,不必思考什么优先级”。其实是优先级都是一样的准则,当抵触时都须要抉择,要害就是样式表失效工夫,正是:hover是鼠标移入才失效,样式表代码也失效,此时存在款式值的抵触,而不是一开始就有抵触。

所以并不是说当鼠标移入时,就间接失效伪类选择器款式。

留神状态的不同:

  • 伪类选择器是非默认状态,样式表的值当伪类失效才失效。
  • 个别选择器是默认状态,即设置后,立刻失效。
⚠️也这阐明选择器并不是抉择某个元素,而是抉择某个状态下的元素。即元素是存在默认款式的,就存在默认的状态。更贴近点,选择器是抉择状态的,状态才有“可选性”,因为元素都是同一个。

这里案例谬误,让我意识到了存在默认状态和非默认状态之分,对于选择器的「抉择」也有更进一步的了解

优先级是当产生了抵触时,才须要思考优先级(如正确代码的最初的样式表,伪类就不是一开始会和其余样式表产生抵触,哪怕伪类的样式表优先级高,也并不会抉择height:100px的,当应用到伪类,值失效,值发生冲突)。

记住当选择器失效时,值才失效,成果才失效。

相干文章:

  1. CSS选择器的优先级（精讲版）
  2. CSS选择器优先级总结 - wanglehui - 博客园
  3. 优先级 - CSS（层叠样式表） | MDN