关于css:css伪类选择器踩坑

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