伪类与伪元素的异同
在说明它们的区别之前先讲讲这两个是什么东西.
伪类:
什么是伪类:
伪类用于定义元素的特殊状态.
伪类的作用:
- 当用户将鼠标悬停在元素上时为其设置样式
- 样式访问和未访问的链接不同
- 在获得焦点时设置元素的样式
伪类的语法:
selector:pseudo-class {
property:value;
}
伪类的种类(以a作为selector):
a:link : 鼠标点击后selector的效果
a:visited: 鼠标移过去后selector的效果
a:hover: 鼠标停留在该selector上的效果
a:active: 鼠标点击该selector的效果
(还有更多的种类在此就不一一列举了.)
Notice: 在CSS定义中 a:hover必须在 a:link 和 a:visited 之后能生效. a:active 必须在 a:hover 之后才能有效！伪类名称不区分大小写。
如果还不懂的话下面上代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 /* unvisited link */ 6 a:link { 7 color: red; 8 } 9 10 /* visited link */ 11 a:visited { 12 color: green; 13 } 14 15 /* mouse over link */ 16 a:hover { 17 color: hotpink; 18 } 19 20 /* selected link */ 21 a:active { 22 color: blue; 23 } 24 </style> 25 </head> 26 <body> 27 28 <p><a href="default.asp" target="_blank">Link</a></p> 29 30 </body> 31 </html>
伪元素:
什么是伪元素:
CSS伪元素用于设置元素的指定部分的样式。
伪元素作用:
- 设置元素的第一个字母或行的样式
- 在元素内容之前或之后插入内容
伪元素的语法:
selector::pseudo-element {
property:value;
}
伪元素的种类(以p为selector)
p::after : 在每个<p>元素的内容后面插入一些内容
p::before: 在每个<p>元素的内容前面插入一些内容
p::first-letter: 选择每个<p>元素的第一个字母
p::frist-line: 选择每个<p>元素的第一行
p::selection: 选择由用户选择的元素的部分
如果需要增加内容的话property:value需要添加一个 content: " text "; (text为你需要添加的内容)至于效果大家可以自己去试一试,这里也不在过多的详说了.
伪类与伪元素的异同点:
相信大家都已经发现这两者有着很多相似之处,但是同时也具有着些许的差异感吧.下面来正式讲解一下两者的区别:
相同点:
1.语法都是 "选择器 + 单/双冒号 + 内容(属性值)".
2.都是对指定选择器的样式的设定起作用.
不相同点:
1.伪类使用的是单冒号" : ",而伪元素使用的是双冒号" :: " .
2.伪类的作用范围为整个选择器的所有内容,如 a:hover{ color:red }; 当你把鼠标移动到这个a这个标签的时候,整个a标签的颜色会变成红色.
伪元素的作用范围为这个选择器的一部分,如p::after{ content: "text";} 只是更改了p标签前面的内容.
PS:以上为我总结出来的经验,希望能帮到读者.另外,本人知识水平有限,如有遗漏或者错误之处敬请补充.
