文章目录

1. 伪类
2. 伪元素

1. 伪类

1.1 anchor伪类

1.1.1 链接样式

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

1.1.2 下划线

a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */

1.1.3 背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

1.2 first-child 伪类

1.2.1 匹配第一个 p 元素

语法

p:first-child { …… }

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world(runoob.com)</title> 
<style>
p:first-child
{
	color:red;
} 
</style>
</head>

<body>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
</body>
</html>

结果显示

1.2.2 匹配所有 元素中的第一个 元素

语法

p > i:first-child  { …… }

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style>
p > i:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p> |=p元素=| <i>|=第一个i=| </i>|=继续p=|<i>|=第二个i=|</i>|=继续p=|</p>
<p> |=p元素=| <i>|=第一个i=| </i>|=继续p=|<i>|=第二个i=|</i>|=继续p=|</p>
</body>
</html>

结果显示

1.2.3 匹配第一个子元素的 中所有 元素

语法

p:first-child i  { …… }

示例
同 2.2 做修改
结果显示

1.3. lang 伪类

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
<title>玄德公记事</title> 
<style>
q:lang(no)
{
	quotes: "\\" "/";
}
</style>
</head>

<body>
<p>曹贼说： <q lang="no">天下英雄，唯使君与操耳。</q> 当时吓死宝宝了</p>
</body>
</html>

显示结果

在这里插入图片描述

1.4 focus伪类

示例

<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style>
input:focus
{
	background-color:yellow;
}
</style>
</head>

<body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form>

</body>
</html>

结果显示

2. 伪元素

2.1 first-line 伪元素

作用：作用于元素的第一行
范围：只能用于块级元素
示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</title> 
<style>
p:first-line 
{
color:red;
}
</style>
</head>

<body>
<p>p的第一行<br>
	p的第二行</p>
</body>
</html>

显示结果

2.2 first-letter 伪元素

作用：作用于元素的第一个字母
范围：只能用于块级元素
实现

p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}

结果显示

2.3 before/after 伪元素

作用：在每个 元素前加个东西（当然也可以是< h1 >等）
实现

p:before {content:"xxxx";}
p:after {content:"xxxx";}

加的如果是图片

p:before {content:url(xxx.gif);}

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>玄德公记事</title> 
<style>
p:before {content:"五虎上将：";}
</style>
</head>

<body>
	<p>关羽</p>
	<p>张飞</p>
	<p>赵云</p>
	<p>马超</p>
	<p>黄忠</p>
</body>
</html>