伪元素用于定位文档中包含的文本,但是它表示DOM外部的某种文档结构
伪类:
伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单来说,获取不存在与DOM树中的信息。比如<a>
标签的:link
、visited
等,这些信息不存在于DOM树结构中,只能通过CSS选择器来获取;获取不能被常规CSS选择器获取的信息。比如伪类:target
,它的作用是匹配文档(页面)的URI中某个标志符的目标元素。
常见的伪类和伪元素
下面看一下伪元素中最常用的before和after:
::before:选择器在被选元素的内容前面插入内容
::after 选择器在被选元素的内容后面插入内容
必须使用 content 属性来指定要插入的内容,否则伪元素没有任何意义。
content属性有几个非常有用的取值
[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:
attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:
a:after { content:"(" attr(href) ")"; }
url() / uri() – 用于引用媒体文件。示例:
h1::before { content: url(logo.png); }
联系客服