【CSS美化专题】更美观的下拉窗口

sz_xd

本帖最后由阿凡佬于 2022-4-26 19:42 编辑

通过前面几期格友的反馈，我发现部分格友还不知道怎么使用我分享的CSS代码，其实不用给单元格设置类名，只要把文件放到项目里，就自动生效了。

但这时候很多人就有疑问了，为什么呢？

我在这里给各位不太清楚原理的讲解一下，大佬请自动略过这段~~~~跳过这段是正文

------------------------------------分割线-----------------------------------------

浏览器在绘制每一个元素的时候，都会按照CSS文件定义的规则，将其以一个特定样式绘制在用户界面上。
而浏览器是如何判断某个样式是属于某个元素的呢？
我们来看下CSS的语法，其实非常简单：

选择器{
属性名 : 属性值 ;
属性名 : 属性值 ;
}

复制代码

一个选择器，一堆属性和其对应的属性值，构成了一个CSS代码块，我们可以理解为一条样式规则。而选择器就是浏览器判断这条规则属于哪些元素的依据。比如

body{
background-color:black;
}

复制代码

这样一条规则，就能把整个页面的背景设置为黑色。

但这时候问题来了，我把整个页面背景都设置成黑色，那这个页面里的其他元素怎么办呢？
浏览器当然不会这么笨，因此，它在为元素设置样式的时候，对每一条样式规则的选择器有一个优先级的判断：

!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

看晕了是不？其实很好理解
就比如这样一个结构
image.png261578673.png

然后写一个CSS

一个 #sec{} ID选择器，自然比 .内层{} 类选择器优先级要高，所以浏览器会首先应用#sec选择器中的规则，没找到的规则，再去类选择器中去找。所以我们看到，sec这个div应用了ID选择器的规则，而fst和thd这两个div仍旧是类选择器中定义的规则
image.png395812377.png

但是在活字格的页面中，我们就没有那么自由了，HTML结构和CSS活字格已经帮我们写好了，因此若想覆盖它，我们必须把CSS的选择器描述得比活字格预定义的CSS选择器更详细。

我们现在假设，sec这个div已经由活字格预定义了，如何改变它的背景颜色呢？
再来看下优先级的排序
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
我们看到，在ID选择器前，还有两个选择器可以使用，行内样式和!important关键字
行内样式即HTML文档结构中定义的style属性，就是<div class="中间层" style="width: 180px;height: 180px;"> 中style="..."的部分，而我们也不可能更改活字格的HTML结构。留给我们的选项就只剩一种，即!important关键字
image.png745249023.png

但这是最好的办法吗？
我们写代码其实还要考虑到未来的可维护性，万一哪天出现了一种特殊情况，而这时候!important关键字已经被使用过，而前面也没有优先级更高的选择器可以使用了，那我岂不是要重构前面的所有代码？(这里吐槽下横向菜单组件下拉窗口的z-index=100000/捂脸)

所以不到万不得已的时候，我们绝不首先动用!important。

这时候我们就简单记住一句话：对一个元素描述得越详细的选择器的优先级越高。

什么意思呢？即使我前面已经用了#sec这个ID选择器，我只需要再写一条比它描述得更加详细的选择器，我就可以覆盖它
image.png586633910.png

同理，我们在活字格中写的CSS，只要比它预定义的CSS描述得更加精准，那么浏览器会先应用我们写的，从而达到“覆盖”的效果。因此，我前面分享的几期CSS美化专题，都是利用优先级的原理覆盖活字格原生的样式，所以我们不用给单元格写类名，只要把CSS文件放到项目中，就可以应用到发布的网页

test.html (1.23 KB, 下载次数: 889)

2022-4-23 17:09 上传

点击文件名下载附件上面内容的html文件，供参考

------------------------------------以下是正文-----------------------------------------

原生的下拉菜单是这样的
image.png29607848.png

我们先把重心放到我们最看不顺眼的地方：滚动条和右下角那个拖动角

1650856947(1).png598749084.png

关于滚动条，那我可有话要讲了，当年我在捣鼓Winform的UI组件的时候，绞尽脑汁想把滚动条给美化一下，然而他是由系统底层提供的，我根本无法在控件层面上重写，后来就写了一个自定义控件，又写了一堆接口以使它与父容器互动，折腾死我了，最后还是有一堆BUG。

其实浏览器上也大同小异，滚动条的样式其实不是由页面设计者决定的，而是由浏览器直接给一个统一的样式，因此我们除非也用js写一个自定义的滚动条组件，否则无法轻易地更改滚动条样式。虽然在MDN中，我们可以查询到scrollbar-width和scrollbar-color属性，但是同样受限于这两个属性，我们只能更改滚动条的宽度和背景颜色。不过在Chrome等用webkit内核的浏览器中，提供了-webkit-scrollbar这一个伪对象，我们几乎可以像更改网页元素一样自由地更改滚动条组件，但使用它请考虑到用户的浏览器，具体参考MDN文档中的浏览器兼容性表格：::-webkit-scrollbar -MDN

下面我们用-webkit-scrollbar，对下拉窗口的滚动条美化一下

.gcim-dropdown-down .scroll::-webkit-scrollbar { /*滚动条整体样式*/
width: .5rem;
height: .5rem;
}
.gcim-dropdown-down .scroll::-webkit-scrollbar-thumb {/*滚动条拖动块样式*/
background-color: rgba(95, 95, 95, .2);
border-radius: .5rem;
}
.gcim-dropdown-down .scroll::-webkit-scrollbar-thumb:hover {/*滚动条拖动块鼠标经过样式*/
background-color: rgba(95, 95, 95, .7);
}

复制代码

还是要强调一下，这个样式仅在webkit内核的浏览器中起作用，比如Chrome, Safari还有现在微软的Edge。在Firefox和IE中均不起作用

这时候有格友应该发现了，那我是不是可以直接使用::-webkit-scrollbar，把样式应用到全局呢？答案是当然可以！
你尽可以这样做

::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: rgba(95, 95, 95, .2);
border-radius: .5rem;
transition: all .8s;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(95, 95, 95, .7);
}

复制代码

这样一来，页面上所有滚动条对象，都被应用了统一的样式。当然你也可以对某一个组件设置特定的样式，就像我前面提到的，对一个元素描述得越详细的选择器的优先级越高。所以全局选择器的样式的优先级是最低的。

接下来美化一下这个小方块

1650861393(1).png70817564.png

我们美化了滚动条，那下面这个小方块的确太碍眼了，毕竟它不太常用，我尽可以把它删掉，但是我又想保留它拖动的功能，以防万一哪天我要用到它。所以我想到，可以把这个小方块先隐藏了，等鼠标经过的时候，再用一个缓动的效果显示出来。

如果想要隐藏一个元素，在CSS中有3种方式：display:none 、 visibility:hidden 以及 opacity:0

我们来看下在这里我们应当使用哪种方式，
display:none ，这个属性将使页面元素不再占据网页布局空间，鼠标也找不到它，更别提鼠标经过显示了。
visibility:hidden，虽然这个属性布局空间仍然保留，而且能响应transition的缓动效果，但是它将使其鼠标绑定事件失效，因此我们没办法通过:hover对其设置其鼠标经过状态。但今后我们如果想要隐藏某一个元素，这个属性是推荐使用的，它比opacity:0和display:none性能更好(微乎其微)，而且更加灵活，只有这个属性能够在父元素被设置hidden状态下，子元素仍能通过visibility:visible显示。
那这时候我们就用opacity:0; 将其不透明度设置为0，然后hover时将opacity设置为1，即不透明度100%

.gcim-dropdown-down .corner{
opacity: 0;
}
.gcim-dropdown-down .corner:hover{
opacity:1;
}

复制代码

我们需要的行为已经达到了，现在给他换一个图标，再添加一点动画效果

.gcim-dropdown-down .corner[resize="true"]{ /*因为活字格原生CSS选择器中对resize属性有描述，所以我们也需要加上这一条才能比原生选择器优先级更高*/
opacity: 0;
transition: opacity .2s;
background-image: var(--icon-corner); /*root中定义的dataurl,在附件中*/
}
.gcim-dropdown-down .corner:hover{
opacity:1;
}

复制代码