文章关键字 ‘伪类’

巧用:is()或:where()伪类让scoped的style依然全局匹配

2022年09月20日,星期二

熊和兔子封面图

本文介绍一个实用前端技术,可以让框架中私有上下文中的CSS不添加随机属性选择器,从而可以匹配第三方组件的HTML结构以及JS动态生成的HTML元素。

阅读全文…

来了,来了,CSS :has()伪类她来了

2022年08月24日,星期三

云和梯子

盼星星盼月亮,盼了24年,:has() 伪类终于来了,在棘手的性能问题解决之后,这是一个神级CSS伪类,以后一定会在前端领域掀起不小的波澜。

阅读全文…

CSS :not伪类可能错误的认识

2019年07月28日,星期日

:not伪类

伪类是目前唯一一个可以大规模放心使用的逻辑伪类,非常有用,优点也很突出,但是,其中也不乏一些会让人踩坑的地方,本文主要介绍这几个可能错误认识的地方。

阅读全文…

CSS :focus-visible伪类让我感动哭了

2019年03月24日,星期日

focus-visible缩略图

:focus-visible可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发,从而可以更有效地控制浏览器中因为focus行为触发的outline轮廓样式,解决了我一个困扰我多年的难题。

阅读全文…

伪类匹配列表数目实现微信群头像CSS布局的技巧

2019年03月11日,星期一

子元素数量不同布局效果也不一样,这样的需求还比较常见,其中借助CSS伪类,我们可以纯CSS判断子元素项的个数,从而智能实现我们需要的布局,无需额外的标签指定,很有意思。

阅读全文…

CSS :placeholder-shown伪类实现Material Design占位符交互效果

2018年12月25日,星期二

表单与label与placeholder

Material Design规范中占位符交互效果是这样的:focus输入框的时候,placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript,实际上,纯CSS就能搞定之,就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错,可以在实际项目中应用。究竟如何实现?有没有这么神奇?一起进来看看吧~

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日,星期一

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…

CSS :visited伪类选择器隐秘往事回忆录

2018年10月12日,星期五

头图

CSS :visited伪类选择器你以为很简单,麻鸭,估计是所有伪类选择器里面最不简单,最怪异的了。很多奇怪的特性你想都想不到,进来看看,一定会有别样的收获的。

阅读全文…

详细了解CSS :focus-within伪类及其交互应用

2018年01月21日,星期日

:focus-within伪类原本设计的作用是原生表单元素focus时候,祖先<form>元素可以也有状态变化。

但是在我看来,:focus-within功能之强悍,远远不是仅仅和祖先<form>元素玩过家家这么简单。

理论上,只要页面上任意一个元素focus,通过:focus-within就能对页面上任意的元素进行样式控制…

阅读全文…

如何在CSS中实现父选择器效果?

2016年08月7日,星期日

虽然说至今尚无浏览器支持原生的父选择器效果,但是,我们是可以通过其他手段来实现父选择器效果的,虽说不是100%完全,但是,一般的项目需求都是可以满足的,如何实现呢?如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”……

本文其他地方是看不到的哟~~

阅读全文…