伪类和伪元素

伪类:

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

　　 伪类的作用:　　

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

　　 伪类的语法:　　

selector:pseudo-class {
    property:value;
}

　　

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

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

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

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

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

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

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

 

伪元素:

　　　　　　CSS伪元素用于设置元素的指定部分的样式。

　　　伪元素作用:

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

　　　伪元素的语法:

selector::pseudo-element {
    property:value;
}

伪元素的种类(以p为selector)

 

　　　　　　p::after : 在每个<p>元素的内容后面插入一些内容

 

　　　　　　p::before: 在每个<p>元素的内容前面插入一些内容

 

　　　　　　p::first-letter: 选择每个<p>元素的第一个字母

 

　　　　　　p::frist-line: 选择每个<p>元素的第一行

 

　　　　　　p::selection: 选择由用户选择的元素的部分

 

　伪类与伪元素的异同点:

　　　相同点:

　　　　　　1.语法都是  "选择器 + 单/双冒号 + 内容(属性值)".

　　　　　　2.都是对指定选择器的样式的设定起作用.

　　　不同点:

　　　　　　1.伪类使用的是单冒号" : ",而伪元素使用的是双冒号" :: " .

　　　　　　2.伪类的作用范围为整个选择器的所有内容,如 a:hover{ color:red }; 当你把鼠标移动到这个a这个标签的时候,整个a标签的颜色会变成红色.