每日一篇（8）--CSS伪类选择器

最新推荐文章于 2024-11-14 09:54:48 发布

彭于晏之济南分宴.

最新推荐文章于 2024-11-14 09:54:48 发布

阅读量128

点赞数

文章标签： css3 css javascript html5 html

本文链接：https://blog.csdn.net/qq_42312466/article/details/106923927

版权

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>