伪元素

CSS伪类和伪元素总结

大家好!在早期的网页设计之中,我不得不从试验以及错误之中进行学习总结。那时没有可参考的杂志,也没有像 Codepen 或者其它类似的使用工具。如果有人可以为我指点一下,尤其是CSS方面,都将会是很大的帮助。现在我的经验越来越多,我想和大家分享一个有关于CSS 伪类以及伪元素的总结。如果你是一位前端设计者或开发者,你一定对将要讨论的伪元素以及伪类有所了解并且可能使用过它们。然而我还是建议你看看本文所讲的所有条目选项,你可能会有新的收获。

伪元素控制表单样式

伪元素大家熟悉的可能也就是常见的那几种,比如“::before”、“::after”等,熟不知各大引擎浏览器都有自己的私有伪元素,用来做一些特别的处理。比如前段时间CtripUED团队整理的Webkit CSS Library,里面整理了所有webkit引擎浏览器的私有属性和一些伪元素对元素的样式处理。本文由D姐根据TJ VanToll的英文文章原名《List of Pseudo-Elements to Style Form Controls》进行翻译,向大家介绍了一些伪元素控制表单的样式方法。因为当开发web应用程序时,表单样式是个头疼的问题。以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示。然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。希望这篇文章对大家处理表单时有所帮助。

CSS3伪元素应用——CSS3 Button

有关于CSS3制作buttons,本站前面介绍了多个案例:

返回顶部