CSS伪类选择器伪元素

E:first-child ----匹配作为父元素的第一个子元素E 【例如ul 下的第一个li】
E:last-child  ----匹配作为父元素的最后一个子元素E
E:only-chlid  ----匹配作为父元素的唯一一个子元素E
E:nth-child(n) ---匹配作为父元素的第n个子元素e [n=odd匹配奇数 ，n=even匹配偶数 n=2n+1奇数 n=2n偶数]

E:empty ----匹配元素内部为空（没有内容）的元素
E:checked ----匹配被选中的元素（用于input type = radio or checkbox）
E:enabled ----匹配可用的 例如input type =text 的元素 可输入状态
E:disabled ----匹配不可用的 例如input type =text disabled 不可输入状态

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div::before{
			content: "p段落前面"; //必写
			display:block;
			background: red;
		}
		div::after{
			content: "p段落后面"; //必写
			background: red;
			border: 1px solid blue;
			display: block;
		}
	</style>
</head>
<body>
	<div>
		<p>段落</p>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*	p::first-letter{ //匹配p元素内第一个字符
			font-size:60px;
		}
		p::first-line{ //匹配p元素内第一行字符
			background: red;
		}*/
		p::-moz-selection{
			color:pink;
			background: #E81EC1;
		}
		p::selection{ //被选中的
			color:pink;
			background: #E81EC1;
		}
	</style>
</head>
<body>
	<p>的数据客服电话看圣诞节数据库设计稿计划书给建行和家世界数据过的数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕数据库设计稿计划书给建行和家世界数据过的痕痕迹啊</p>
</body>
</html>

CSS伪类选择器 伪元素

猜你喜欢

CSS伪类选择器伪元素