【CSS美化专题】更美观的下拉窗口
本帖最后由 阿凡佬 于 2022-4-26 19:42 编辑通过前面几期格友的反馈，我发现部分格友还不知道怎么使用我分享的CSS代码，其实不用给单元格设置类名，只要把文件放到项目里，就自动生效了。
但这时候很多人就有疑问了，为什么呢？
我在这里给各位不太清楚原理的讲解一下，大佬请自动略过这段~~~~跳过这段是正文
------------------------------------分割线-----------------------------------------
浏览器在绘制每一个元素的时候，都会按照CSS文件定义的规则，将其以一个特定样式绘制在用户界面上。
而浏览器是如何判断某个样式是属于某个元素的呢？
我们来看下CSS的语法，其实非常简单：
选择器{
属性名 : 属性值 ;
属性名 : 属性值 ;
}
一个选择器，一堆属性和其对应的属性值，构成了一个CSS代码块，我们可以理解为一条样式规则。而选择器就是浏览器判断这条规则属于哪些元素的依据。比如
body{
background-color:black;
}这样一条规则，就能把整个页面的背景设置为黑色。
但这时候问题来了，我把整个页面背景都设置成黑色，那这个页面里的其他元素怎么办呢？
浏览器当然不会这么笨，因此，它在为元素设置样式的时候，对每一条样式规则的选择器有一个优先级的判断：
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
看晕了是不？其实很好理解
就比如这样一个结构
然后写一个CSS
一个 #sec{} ID选择器，自然比 .内层{} 类选择器优先级要高，所以浏览器会首先应用#sec选择器中的规则，没找到的规则，再去类选择器中去找。所以我们看到，sec这个div应用了ID选择器的规则，而fst和thd这两个div仍旧是类选择器中定义的规则
但是在活字格的页面中，我们就没有那么自由了，HTML结构和CSS活字格已经帮我们写好了，因此若想覆盖它，我们必须把CSS的选择器描述得比活字格预定义的CSS选择器更详细。
我们现在假设，sec这个div已经由活字格预定义了，如何改变它的背景颜色呢？
再来看下优先级的排序
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
我们看到，在ID选择器前，还有两个选择器可以使用，行内样式和!important关键字
行内样式即HTML文档结构中定义的style属性，就是<div class="中间层" style="width: 180px;height: 180px;"> 中style="..."的部分，而我们也不可能更改活字格的HTML结构。留给我们的选项就只剩一种，即!important关键字
但这是最好的办法吗？
我们写代码其实还要考虑到未来的可维护性，万一哪天出现了一种特殊情况，而这时候!important关键字已经被使用过，而前面也没有优先级更高的选择器可以使用了，那我岂不是要重构前面的所有代码？(这里吐槽下横向菜单组件下拉窗口的z-index=100000/捂脸)
所以不到万不得已的时候，我们绝不首先动用!important。
这时候我们就简单记住一句话：对一个元素描述得越详细的选择器的优先级越高。
什么意思呢？即使我前面已经用了#sec这个ID选择器，我只需要再写一条比它描述得更加详细的选择器，我就可以覆盖它
同理，我们在活字格中写的CSS，只要比它预定义的CSS描述得更加精准，那么浏览器会先应用我们写的，从而达到“覆盖”的效果。因此，我前面分享的几期CSS美化专题，都是利用优先级的原理覆盖活字格原生的样式，所以我们不用给单元格写类名，只要把CSS文件放到项目中，就可以应用到发布的网页
上面内容的html文件，供参考
------------------------------------以下是正文-----------------------------------------
原生的下拉菜单是这样的
我们先把重心放到我们最看不顺眼的地方：滚动条和右下角那个拖动角
关于滚动条，那我可有话要讲了，当年我在捣鼓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);
}
这样一来，页面上所有滚动条对象，都被应用了统一的样式。当然你也可以对某一个组件设置特定的样式，就像我前面提到的，对一个元素描述得越详细的选择器的优先级越高。所以全局选择器的样式的优先级是最低的。
接下来美化一下这个小方块
我们美化了滚动条，那下面这个小方块的确太碍眼了，毕竟它不太常用，我尽可以把它删掉，但是我又想保留它拖动的功能，以防万一哪天我要用到它。所以我想到，可以把这个小方块先隐藏了，等鼠标经过的时候，再用一个缓动的效果显示出来。
如果想要隐藏一个元素，在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{ /*因为活字格原生CSS选择器中对resize属性有描述，所以我们也需要加上这一条才能比原生选择器优先级更高*/
opacity: 0;
transition: opacity .2s;
background-image: var(--icon-corner); /*root中定义的dataurl,在附件中*/
}
.gcim-dropdown-down .corner:hover{
opacity:1;
}
好了，今天的方法论结束，上成品！
以下是Demo和CSS源码
**** Hidden Message *****
本帖最后由 阿凡佬 于 2022-7-9 15:23 编辑
第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:【CSS美化专题】不一样的菜单用法
第六期:【CSS美化专题】图文列表的妙用
感谢分享，这个确实需要美化 :lol:lol:lol:lol感谢分享 :nbtz5: CSS就是比较繁琐，做好了确实也美观，谢谢作者的用心！:)
页:
[1]