html结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		child 孩子  向下寻找时,没有找到指定元素,则不会在寻找
		type  类型  向下寻找时,没有找到指定元素,继续往下寻找,直到找到
		从(1)开始搜索
		nth-child(值)   nth-of-type(值) 寻找指定值  n=所有  偶数2,4,6…… 基数:1,3,5……如下,可运行
		first-of-type  寻找第一个元素   last-of-type 寻找最后一个元素  only-of-type  寻找唯一元素
		
		<style>
/* 			li:nth-child(2n+1){
				background-color: #FF0000;
			}
			li:nth-of-type(2n){
				background-color: blue;
			} */
/* 			li:nth-of-type(2){
				background-color: aqua;
			}
			li:nth-child(5){
				background-color: chocolate;
			} */
			li:first-of-type{
				background-color: #FF0000;
			}
			li:last-child{
				background-color: #FF0000;
			}
			p:only-of-type{
				color: blue;
			}
/* 			div:only-of-type{
				background-color: #FF0000;
			} */
		</style>
	</head>
	<body>
		<ul>
			<div>aaa</div>
			<li></li>
			<li></li>
			<div>aaa</div>
			<li></li>
			<li></li>
			<li></li>
			<p>111</p>
		</ul>
<!-- 		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul> -->
	</body>
</html>

  

原文地址:https://www.cnblogs.com/wsx123/p/15760178.html