css+css3之结构伪类选择器

最新推荐文章于 2024-04-16 16:18:11 发布

潜龙卧湖

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量134

点赞数

分类专栏： css+css3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44046450/article/details/107743177

版权

css+css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css+css3之结构伪类选择器

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
        	li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
        	li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}
        	
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    	</ul>
    </body>
</html>

效果如下
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	/* li:nth-child(odd) {  可以选择所有的 odd奇数 的孩子标签 
				color: pink;
        	}

        	li:nth-child(even) {    可以选择所有的 even 偶数 的孩子标签 
				color: deeppink;
        	} */

			li:nth-child(3n) {   /* n 0   2n    2n是 选择 0 2.4.6.8..的孩子  3n 0.3.6.9的孩子元素 */
				color: pink;
            
        	}
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    	</ul>
    </body>
</html>

效果如下：
在这里插入图片描述

代码如下：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	/* li:nth-child(even) {  从第一个孩子开始数的
                color: pink;
            } */
            li:nth-last-child(even) {  /*  nth-last-child 从最后一个孩子开始数  倒数 */
                color: skyblue;
            }
        </style>
    </head>
    <body>
    	<ul>
    		<li>第一个孩子</li>
    		<li>第二个孩子</li>
    		<li>第三个孩子</li>
    		<li>第四个孩子</li>
    		<li>第五个孩子</li>
    		<li>第六个孩子</li>
    		<li>第七个孩子</li>
    		<li>第八个孩子</li>
    	</ul>
    </body>
</html>

效果如下：
在这里插入图片描述

潜龙卧湖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css+css3之结构伪类选择器

css+css3之结构伪类选择器代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child { /* 最后一个孩子
复制链接

扫一扫

专栏目录