伪类与伪元素的异同

时间 2019-11-24

标签元素异同繁體版

原文原文链接

　　在说明它们的区别以前先讲讲这两个是什么东西.html

　伪类:

　　什么是伪类:　　

　　　　伪类用于定义元素的特殊状态.spa

　　伪类的做用:　　

当用户将鼠标悬停在元素上时为其设置样式
样式访问和未访问的连接不一样
在得到焦点时设置元素的样式

　　伪类的语法:　　

selector:pseudo-class {
    property:value;
}

　　伪类的种类(以a做为selector):

　　　　a:link :　鼠标点击后selector的效果
code

　　　　a:visited:　鼠标移过去后selector的效果htm

　　　　a:hover:　鼠标停留在该selector上的效果blog

　　　　a:active:　鼠标点击该selector的效果element

　　　　(还有更多的种类在此就不一一列举了.)get

　　　Notice:　在CSS定义中 a:hover必须在 a:link 和 a:visited 以后能生效. a:active 必须在 a:hover 以后才能有效！伪类名称不区分大小写。it

　　若是还不懂的话下面上代码:io

 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伪元素用于设置元素的指定部分的样式。class

　　　伪元素做用:

设置元素的第一个字母或行的样式
在元素内容以前或以后插入内容

　　　伪元素的语法:

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:以上为我总结出来的经验,但愿能帮到读者.另外,本人知识水平有限,若有遗漏或者错误之处敬请补充.