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

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

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

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

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

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

1. 选择器{
   
2. 属性名 : 属性值 ;
   
3. 属性名 : 属性值 ;
   
4. }

复制代码

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

1. body{
   
2. background-color:black;
   
3. }

复制代码

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

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

!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文件放到项目中，就可以应用到发布的网页
test.html (1.23 KB, 下载次数: 125)

2022-4-23 17:09 上传

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


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


原生的下拉菜单是这样的


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



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


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


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

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

复制代码

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


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

1. ::-webkit-scrollbar {
   
2.     width: .5rem;
   
3.     height: .5rem;
   
4. }
   
5. 
   
6. ::-webkit-scrollbar-thumb {
   
7.     background-color: rgba(95, 95, 95, .2);
   
8.     border-radius: .5rem;
   
9.     transition: all .8s;
   
10. }
    
11. 
    
12. ::-webkit-scrollbar-thumb:hover {
    
13.     background-color: rgba(95, 95, 95, .7);
    
14. }

复制代码

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


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



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

如果想要隐藏一个元素，在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%

1. .gcim-dropdown-down .corner{
   
2.     opacity: 0;
   
3. }
   
4. .gcim-dropdown-down .corner:hover{
   
5.     opacity:1;
   
6. }

复制代码

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

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

复制代码

好了，今天的方法论结束，上成品！


以下是Demo和CSS源码

游客，如果您要查看本帖隐藏内容请回复

第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化  
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:  【CSS美化专题】不一样的菜单用法
第六期:  【CSS美化专题】图文列表的妙用

学习一下

好东西，给楼主点赞

系统学习下

厉害 学习了

顶楼主啦..希望楼主多发精品好帖啦.....

墙贴留名。

学习了