伪元素和伪类

Posted 2020-10-04

css伪类用于向某些选择器添加特殊的效果

css伪元素用于将特殊的效果添加到某些选择器

 

 

伪类种类

:active	将样式添加到被激活的元素
:focus	将样式添加到被选中的元素
：hover	鼠标悬浮在上方
：link	未被访问过的链接
：visited	被访问过的链接
：first-child	特殊的样式添加到元素第一个子元素
：lang	允许创作者来定义指定的元素中使用的语言

 

 

伪元素种类

：first-letter	将特殊的样式添加到文本的首字母
：first-line	将特殊的样式添加到文本的首
：before	在某元素之前插入某些内容
：after	在某元素之后插入某些内容

 

区别

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实例才能达到，这样式他们为什么一个称为伪类，一个称为伪元素的原因

 

 

总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示

 

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者

 

 

伪元素的使用

css伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素

a::after{

    content:"->";

    background-color:red;

    border-color:black;

    border-style:dotted;    

}

 

 

提示用法

attr()   css表达式和一个自定义数据属性data-descr创建一个存css，词汇表提示工具

span[data-descr]:hover::after{

content:attr(data-desrc);

将属性为data-desrc的属性值变为伪元素

//这里写伪元素的样式

}

 

content:url(链接)

content:"("attr(href)")"    //感觉是字符串和变量连接在一起

清除浮动

实现多张背景图片

做一些动画

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }