简要
伪类 不存在的类 表示元素的一种状态,好比排在第一位,倒数第一个,鼠标悬浮,鼠标点击
例如:
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
n 选中所有的子元素
2n/even 偶数
2n+1/odd 奇数
以上的伪类,是根据所有的子元素进行排序的
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(n) 选中第n个子元素
在同类型中,进行排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li:last-of-type{color: red;}
li:not(.l1){
background-color: pink;
}
</style>
</head>
<body>
<h1>沁园春·雪</h1>
<h3>毛泽东</h3>
<ul>
<span>测试</span>
<li>一代天骄,成吉思汗,只识弯弓射大雕。</li>
<li>北国风光,千里冰封,万里雪飘。</li>
<li class="l1" id="ll">望长城内外,惟余莽莽;大河上下,顿失滔滔。</li>
<li>山舞银蛇,原驰蜡象,欲与天公试比高。</li>
<li>须晴日,看红装素裹,分外妖娆。</li>
<li>江山如此多娇,引无数英雄竞折腰。</li>
<li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</li>
<li>真皇举应丐你了挟起。</li>
<p>狂也秦马五月锐九几已思作无破文兼己,不。</p>
</ul>
</body>
</html>
总结
更容易让我们选择所选中的内容 方便我们选中