伪类是目前唯一一个可以大规模放心使用的逻辑伪类,非常有用,优点也很突出,但是,其中也不乏一些会让人踩坑的地方,本文主要介绍这几个可能错误认识的地方。
文章关键字 ‘伪类’
CSS :not伪类可能错误的认识
2019年07月28日,星期日伪类匹配列表数目实现微信群头像CSS布局的技巧
2019年03月11日,星期一CSS :placeholder-shown伪类实现Material Design占位符交互效果
2018年12月25日,星期二Material Design规范中占位符交互效果是这样的:focus输入框的时候,placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript,实际上,纯CSS就能搞定之,就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错,可以在实际项目中应用。究竟如何实现?有没有这么神奇?一起进来看看吧~
周知:CSS -webkit-伪元素选择器不再导致整行无效
2018年12月17日,星期一通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。
CSS :visited伪类选择器隐秘往事回忆录
2018年10月12日,星期五详细了解CSS :focus-within伪类及其交互应用
2018年01月21日,星期日:focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先<form>
元素可以也有状态变化。
但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先<form>
元素玩过家家这么简单。
理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制…
如何在CSS中实现父选择器效果?
2016年08月7日,星期日虽然说至今尚无浏览器支持原生的父选择器效果,但是,我们是可以通过其他手段来实现父选择器效果的,虽说不是100%完全,但是,一般的项目需求都是可以满足的,如何实现呢?如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”……
本文其他地方是看不到的哟~~
小tip:CSS计数器+伪类实现数值动态计算与呈现
2014年12月7日,星期日内容如题,重在展示,以及开拓眼界,拓宽思路。与通常该调调的文章类似,有demo,有源代码展示,还有必要的截图。总之,希望本文的内容能够对您的学习有所帮助。
小tip: CSS动态实现文本框清除按钮的隐藏与显示
2014年03月28日,星期五search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……
源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。