css3伪类选择器/状态伪类选择器使用--小技巧

 

目录

伪类选择器

不同元素间使用 

 状态伪类选择器

伪类选择器

:root{ } 匹配根元素
	 
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式
	偶数：even  或  2n
	奇数：odd  或   2n+1
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 匹配根元素 */
			:root {
				background: yellow;
			}
			
			/* 选择一组相同元素中的第一个元素 */
			.wrap div:first-child {
				background: #f0f;
			}

			/* 选择一组相同元素中的最后一个元素 */
			.wrap div:last-child {
				background: tomato;
			}

			/* 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式 */
			.wrap div:nth-child(3) {
				background: orange;
			}

			/* 奇数：odd  或   2n+1 */
			.wrap div:nth-child(odd) {
				background: lightblue;
			}

			/* 偶数：even  或  2n */
			.wrap div:nth-child(even) {
				background: lightcyan;
			}

			.wrap div:nth-child(2n) {
				background: lightcoral;
			}

			.wrap div:nth-child(2n+1) {
				background: lightgreen;
			}

			.wrap div {
				margin-bottom: 20px;
			}

			.wrap2 {
				height: 100px;
				background: goldenrod;
			}
			
			
			.wrap div:nth-child(3n) {
				margin-bottom: 0;
			}

			/* 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式 */
			.wrap div:nth-last-child(2) {
				height: 100px;
			}

			.wrap div:nth-last-child(odd) {
				height: 50px;
			}

			.wrap div:nth-last-child(2n) {
				width: 500px;
			}
		</style>
	</head>
	<!-- 
	
	 -->
	<body>
		<div class="wrap">
			<div>box1</div>
			<div>box2</div>
			<div>box3</div>
			<div>box4</div>
			<div>box5</div>
			<div>box6</div>
		</div>
	</body>
</html>

不同元素间使用 

element:nth-of-type(n){ } 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式 */
			.wrap div:nth-of-type(1) {
				background: red;
			}

			.wrap div:nth-of-type(3) {
				background: pink;
			}

			.wrap p:nth-of-type(2) {
				background: tomato;
			}

			.wrap div:nth-of-type(odd) {
				background: lightblue;
			}

			.wrap div:nth-of-type(2n) {
				background: lightsalmon;
			}

			/* 一组元素中选择特定类型的元素，但是需要从最后一个开始计算 */
			.wrap div:nth-last-of-type(1) {
				background: blue;
			}

			.wrap div:nth-last-of-type(2n) {
				background: lightgoldenrodyellow;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<h2>title</h2>
			<div>box1</div>
			<div>box2</div>
			<h3>title</h3>
			<p>段落内容1</p>
			<p>段落内容2</p>
			<div>box3</div>
			<div>box4</div>
			<div>box5</div>
			<div>box6</div>
		</div>
	</body>
</html>

 

 状态伪类选择器

element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选择页面中处于选中状态的element元素 */
			.for input[type=radio]:checked{
	            background: red;
	        }
			
			/* 选择页面中处于禁用状态的element元素 */
	        .for input[type=text]:disabled{
	            background: pink;
	        }
			
			/* 选择页面中处于可用状态的element元素 */
	        .for input:enabled{
	            background: blue;
	        }
	    </style>
	</head>
	<!-- 

	 -->
	<body>
		<form class="for" action="#">
			<div><input type="text" placeholder="请输入用户名"></div>
			<div><input type="text" placeholder="请输入曾用名" disabled></div>
			<div><label><input type="radio" name="sex"> 男</label></div>
			<div><label><input type="radio" name="sex" checked> 女</label></div>
		</form>
	</body>
</html>

 

posted @ 2020-02-28 13:42  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源