Pseudo-class(伪类)、Pseudo-Element(伪元素)简要记录

May 3, 2016

伪类、伪元素配合CSS3可以完成非常多有意思的效果,为方便个人开发时候的快速查阅,记录了以下常用到的一些伪类伪元素的简要中文说明;

简单区分:

:Pseudo-classes		伪类:DOM在不同状态、不同位置下的特殊效果;
::Pseudo-elements	伪元素:DOM按匹配规则伪造出的元素;

注意点:

  • 伪类添加的内容元素或伪类效果通在DOM的源代码中是看不见的,需要借助开发者工具才能看见;
  • 使用屏幕阅读器等设备无法访问和读取伪元素生成的内容。因此不应该使用伪元素来添加正文内容等重要信息到页面上展示,应确保主体内容的完整性。
  • 伪类添加的元素也可以使用CSS样式进行控制,具体查看下面浏览器的兼容性;
  • content方式可以添加的图片、unicode、字符串;其中图片不能调整大小,要选择合适的图片;
  • 伪元素是在DOM内容生成之后添加的,它将被堆积在DOM的父元素的顶上;
  • 伪元素由双冒号和伪元素名称组成,为了兼容使用单冒号的伪类也有效;
  • 伪类添加的内容和元素不能使用任何Javascript的事件处理程序;
  • js获取伪类的值:win.getComputedStyle(doc.querySelector(‘.element’), ‘:before’).getPropertyValue(‘color’)

Browser Support

常用伪元素、伪类列表

::after 		在元素的内容之后
::before  		在元素的内容之前
::first-line 	元素的第一行
::first-letter 	元素的第一个字母
::placeholder	占位符,用于input输入框之类的提醒
::selection 	被选取的元素,用于改变网页被选中部分的效果

:active 		当元素被点击的时
:blank  		空白的元素
:checked  		被选中的元素
:default 		默认被选中或默认会被提交的元素
:dir() 			匹配特定文字书写方向的元素
:disabled		处于被禁止操作状态的元素
:empty 			没有任何内容的元素
:enabled 		处于可操作状态的元素
:first 			用于打印文档的第一页
:first-child 	父级元素下的第一个子元素
:first-of-type 	父级元素下的第一个同类子元素
:focus 			当元素成为焦点
:fullscreen		当元素被HTML5 API调用RequestFullscreen方式全屏时
:hover 			当鼠标移动到链接元素上面时
:in-range		当元素属性值处于其指定的范围内时	
:indeterminate	当元素属性值处于不确定状态的
:invalid		当元素属性值不是指定的type属性时
:lang()  		匹配有正确lang 属性值的元素,如 lang(zh-Hans)
:last-child		元素的最后一个子元素
:last-of-type 	元素的最后一个同类子元素
:left			选择打印文档的左侧页
:link 			未被访问的链接元素
:not() 			否定选择器(不匹配条件则生效)
:nth-child() 	元素的一个或多个特定的子元素
:nth-last-child() 元素的一个或多个特定的子元素,从该元素的最后一个子元素开始算;
:nth-of-type() 	选择指定的元素
:nth-last-of-type()	选择指定的元素,从元素的最后一个开始计算
:only-child		元素是它的父元素的唯一子元素
:only-of-type 	元素是它的父级元素的唯一一个相同类型的子元素
:optional		未指定required属性的表单元素
:out-of-range	超出规定值范围的元素
:read-only		元素设置了 'readonly' 属性生效
:read-write		元素没有 "readonly" 属性生效
:required		设置了 "required" 属性的元素	
:right			选择打印文档的左侧页
:root 			文档的根元素
:scope			作用域的伪类,默认为HTML(案例 :scope #mammma {...})
:target 		当前活动的元素(匹配页面URI中对应的目标元素)
:valid 			表示有效的元素
:visited 		已被访问过的元素
 content		在元素之前或之后添加的内容。
Back to Top