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>