Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > Css :host是什么?

Css :host是什么?

浏览: 作者:Datehoer 发布日期:2020-12-05 10:39:47 来源: 原创
今天想要精进(没事干)一下我的html,css技术,所以准备临摹一下谷歌的首页,也就是那个上面是搜索框,下面是快捷方式的那个页面。
也就是这个页面:

谷歌搜索页面的样式
类似于这张图,不过下面没有Google搜素什么的,只是一个简单的快捷方式,将常用的页面添加成了快捷方式(之所以不上图是因为不想让你们看到我的快捷页面,哈哈)
其实这个打眼一看,就感觉很容易就能做出来效果了,唯一难度应该就是在下面快捷方式中的样式了。

css触碰样式碰到就会发生一个小变化,这个其实使用:hover即可,但是呢,我在边做的过程中,也在用f12查看它谷歌自身的代码,参考一下宽高之类的,然后就发现了一个小问题,它里面的好多代码我都看不懂啊,什么:host,什么 --ntp-theme-shortcut-background-color: rgba(241, 243, 244, 1);之类的。
遇事不要慌,我们先ctrl+u看一下源代码,发现谷歌的源代码很简单,因此我觉得它应该是通过js渲染来维护页面的。
然后这个:host是什么还是不清楚,只好请出百度了,一查才知道,原来这是一个伪类。

CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主(这样就可以从 Shadow DOM 中选择包括它的自定义元素)——但前提是该函数的参数与选择的阴影宿主相匹配。
最简单的用法是仅将类名放在某些自定义元素实例上,然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用,以仅选择特定祖先内部的自定义元素的实例。这是 :host-context() 的作用。
简单的举一个例子:

/* 选择阴影根元素,仅当它与选择器参数匹配 */ 
 :host(.special-custom-element) {
   font-weight: bold;
 }
通过host来为选定的元素提供特殊的效果,这就是host的用法了。
如果还有不懂的,可以点击阅读

最后,简单的看一下我写的Google页面吧。

css:host是什么?
写的很拉跨,哈哈,不过确实有所收获。
如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。

版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/77.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!