CSS - 伪类 - 代码天地

1、超链接（a标签）四大伪类

a:link {color: #FF0000}		/* link 未访问的链接 */
a:visited {color: #00FF00}	/* visited 已访问的链接 */
a:hover {color: #FF00FF}	/* hover 鼠标移动到链接上 */
a:active {color: #0000FF}	/* active 选定的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		a {
			color: #333;
			text-decoration: none;
		}
		/*:link为一个整体,代表超链接的初始状态*/
		a:link {
			color: orange;
		}
		/*:hover鼠标悬浮*/
		a:hover {
			color: green;
			/*鼠标样式*/
			cursor: pointer;
		}
		/*:active活动状态中(被鼠标点击中)*/
		a:active {
			color: red;
		}
		/*:visited访问过的状态*/
		a:visited {
			color: cyan;
		}
	</style>
</head>
<body class="body">
	<a href="./123.html">访问页面</a>
	<a href="https://www.baidu.com">访问过页面</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">

		/*普通标签运用: :hover :active*/
		.box {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box:hover {
			background-color: orange;
			cursor: pointer;
		}
		.box:active {
			width: 400px;
			border-radius: 50%;
		}

	</style>
</head>
<body class="body">
	<div class="box">box</div>
</body>
</html>

2、内容伪类

:before：内容之前
:after：内容之后

:before, :after {
    content: "ctn";
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		
		/*内容伪类*/
		.txt:before {
			content: "我是前缀~~~"
		}
		.txt:after {
			content: ">>>我是后缀"
		}
		


	</style>
</head>
<body class="body">
	<!-- 内容伪类 -->
	<div class="txt">原来的文本</div>
</body>
</html>

注意：/*伪类可以单独出现*/

        :after {
            content: "呵呵"
        }

3、索引伪类

:nth-child(n)：位置优先，再匹配类型
:nth-of-type(n)：类型优先，再匹配位置

注意：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		/*位置伪类*/
		/*1.位置从1开始*/
		/*先匹配位置,再匹配类型: 找到所有结构下（页面中）的第2个标签,如果刚好是div,那么匹配成功*/
		/*body a-baidu div01*/
		div:nth-child(2) {
			color: green;
		}
		
		/*先确定类型,再匹配位置*/
		/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
		div:nth-of-type(2) {
			color: cyan;
		}

		/*2n  ---- div:nth-of-type(2n)、div:nth-child(2n)  */
		/*第2、4、6、8……*/
		/*
			div ooo div
			ooo div ooo
			div ooo div
		*/

		/*3n  ---- div:nth-of-type(3n)、div:nth-child(3n)  */
		/*第3、6、9……*/
		/*
			div div ooo
			div div ooo
			div div ooo
		*/

		/*3n - 1  ---- div:nth-of-type(3n-1)、div:nth-child(3n-1)  */
		/*第2、5、8……*/
		/*
			div ooo div
			div ooo div
			div ooo div
		*/
	</style>
</head>
<body class="body">
	<!-- 位置伪类 -->
	<div class="wrap">
		<span>span01</span>
		<div>div01</div>
		<div>div02</div>
	</div>
	
</body>
</html>

4、取反伪类

:not(selector)：对selector进行取反

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		/*取反伪类*/
		/*若存在对同意元素的相同设定，则按照位置取值*/
		/*:not([d]) {
			color: red;
		}
		body.body {
			color: orange;
		}*/
		span:not([d]) {
			color: red;
		}
	</style>
</head>
<body class="body">
	<!-- 取反伪类 -->
	<span d>12345</span>
	<span dd>67890</span>
</body>
</html>

CSS - 伪类

1、超链接（a标签）四大伪类

2、内容伪类

3、索引伪类

4、取反伪类

猜你喜欢