CSS伪元素是用来添加一些选择器的特殊效果
伪类的定义
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。虽然它和普通的 css 类相似,可以为已有的元素添加样式,是无法在dom树里描述的状态
伪类是一个冒号(:)后跟伪类的名字构成的,有时候名字后面还会有一个放在括号里的值(:nth-child);
伪元素的定义
伪元素是一种虚拟的元素,CSS把它当成普通HTML元素看待。之所以叫伪元素,就因为它们在文档树或DOM中并不实际存在。换句话说,我们不会在HTML中包含伪元素,只会通过CSS来创建伪元素
常见伪类
a:link {color:#000000;} /*没有访问的链接*/
a:visited {color:#00FF00;} /* 已经访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
最常用的就是hover伪类,它经常用来做网页的互动效果
伪元素
p::after /*在每个 <p> 元素之后插入内容。*/
p::before /*在每个 <p> 元素之前插入内容。*/
p::first-letter /*选择每个 <p> 元素的首字母。*/
p::first-line /*选择每个 <p> 元素的首行。*/
p::selection /*选择用户选择的元素部分。*/
伪元素使用的是双冒号,也可以单冒号,只有少部分规定了使用双冒号,单冒号更推荐
有的伪类也可以用于其他HTML元素
语言伪类与页面中包含的文本相关,与图片、视频等媒体无关
包含::dir、:lang
此篇文章转载,只是简单阐述伪类及伪元素,如需了解更多,可以移步到原链接观看
这里是十澈
喜欢的点个赞,谢谢
如有错误,请指正