1、基於父類的僞類選擇器
<style>
li:first-of-type{
//指定類型的僞類選擇器
//只尋找基於li標籤的第一個的樣式
color:red; // 這個時候，數字1的字體顏色會變成紅色
}
////////////////////////////////////////////////////////
li:nth-child(3){
//指定類型的僞類選擇器
//只尋找下標爲3的li標籤 // 下標從1開始
color:green; //這個時候，數字3的字體顏色會變成綠色
}
////////////////////////////////////////////////////////
li:nth-child(even){
//指定類型的僞類選擇器
//()內可以放關鍵字
//例如: 只讓偶數的下標變背景顏色 even代表偶數 odd代表奇數
background-color:pink;
}
////////////////////////////////////////////////////////
li:nth-of-type(even){
//只在li基礎上判定 偶數的字體顏色爲黑色
color:#333;
}
////////////////////////////////////////////////////////
li:nth-of-type(-n + 3){
//在li基礎上判定 改變前3個的標籤的樣式
font-size:12px; //此時 1、2、3 數字字體大小變成12px
}
////////////////////////////////////////////////////////
li:nth-list-of-type(-n + 3){
//在li基礎上判定 改變後3個的標籤的樣式
font-size:12px; //此時 3、4、5數字字體大小變成12px
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>