CSS 伪类、伪元素、超链接伪类样式

第6章 CSS 伪类&伪元素&超链接伪类

  • 一、伪类(pseudo-class)
    • 1、定义
    • 2、语法
    • 3、伪类的相关属性
  • 二、伪元素(Pseudo-elements)
    • 1、定义
    • 2、语法
    • 3、伪元素分类
      • (1):first-line 伪元素
      • (2):first-letter 伪元素
      • (3):after 伪元素
      • (4):before 伪元素
  • 三、超链接伪类
    • 1、超链接样式的特殊性
    • 2、语法及属性值

一、伪类(pseudo-class)

1、定义

(1)CSS 伪类用于向某些选择器添加特殊的效果。

(2)伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

(3)伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。

2、语法

/*selector 选择器: pseudo-class 伪类 */
selector:pseudo-class {
		property:value;
	  /*property属性: value属性值;*/
}

3、伪类的相关属性

CSS 伪类、伪元素、超链接伪类样式_第1张图片

二、伪元素(Pseudo-elements)

1、定义

(1)CSS 伪元素用于向某些选择器设置特殊效果。

(2)CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

2、语法

/*selector 选择器: pseudo-element 伪元素 */
selector:pseudo-element {
	property: value;
/*property属性: value属性值;*/
}

3、伪元素分类

CSS 伪类、伪元素、超链接伪类样式_第2张图片

(1):first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

可应用于 “first-line” 伪元素的属性:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

(2):first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式。

可应用于 “first-letter” 伪元素的属性:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align(仅当 float 为 none 时)
  • text-transform
  • line-height
  • float
  • clear

注意:“first-line” 、 "first-letter"伪元素只能用于块级元素。

(3):after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

(4):before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

三、超链接伪类

1、超链接样式的特殊性

文本或图像加上链接,将失去原样式而继承链接的样式。

2、语法及属性值

a:link{
	color: #FF0000;/*未访问超链接时字体的颜色*/
}

超链接样式的四种状态:

  • 未访问状态(a:link )
  • 已访问状态(a:visited )
  • 鼠标移上状态(a:hover )
  • 激活选定状态(a:active )

注意
(1)为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后

(2)为了使定义生效,a:active 必须位于 a:hover 之后!

(3)未访问状态的超链接颜色在浏览器第一次打开此页面时有效,一旦点击了超链接,颜色变成已访问状态的颜色,关闭该页面或者关闭浏览器再次打开还是已访问状态的颜色,要想恢复未访问状态,火狐和Safari需要清除历史记录。

示例:


<html>
<head>
	<meta charset="UTF-8">
	<title>超链接伪类 title>
<style type="text/css" media="screen">
a:link{
	color: #FF0000;/*未访问超链接时字体的颜色为红色*/
}
a:visited{
	color: #60C5F1;/*已访问超链接时字体的颜色为蓝色*/
}
a:hover{
	color: #FFF766;/*鼠标移动到超链接上时字体的颜色为黄色*/
}
a:active{
	color: #22B14C;
	/*鼠标移动到超链接上并按下时(激活选定状态)字体的颜色为绿色*/
}

style>
head>
<body>
	<a href="#" title="">这是一个超链接伪类a>
	
body>
html>

在web中显示:
(1)link 未访问时字体颜色(注意:当没有连接地址时他会显示为已访问的颜色)
CSS 伪类、伪元素、超链接伪类样式_第3张图片

(2)visited 已访问字体颜色
CSS 伪类、伪元素、超链接伪类样式_第4张图片
(3)hover 鼠标移动到字体上时
CSS 伪类、伪元素、超链接伪类样式_第5张图片

(4)active 鼠标点下时显示为
CSS 伪类、伪元素、超链接伪类样式_第6张图片

你可能感兴趣的:(CSS/CSS3学习笔记)