学会结构伪类选择器再也不会想每个标签都加 class 和id了

最新推荐文章于 2023-06-29 17:29:19 发布

幕自由人

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量261

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/m0_46456778/article/details/115598380

版权

最近在学习css感觉心得犹如喷泉一样狂涌不止，之前学习了结构伪类选择器觉得没啥用，感觉形式冗长，不如类选择器，ID选择器，等简单。但是最近深入学习发现，在一些情况下结构伪类选择器更优于其他选择器
结构伪类选择器的优点
减少文档内的class 和id属性的定义，使文档更简洁。简单来说就是用了结构伪类选择器比不用结构伪类选择器的文档更简洁。
因此弄懂学会结构伪类选择器很重要，关键时刻能节约不少时间
下面是我对结构伪类选择器的自我理解
我把结构伪类分为了两个部分来说
1.-child类型。2.-type类型
child类型：

first-child
该选择器的含义是：选定父元素下的第一个子元素
例如：

div :first-child{
				color: #0000FF;
				font-size: 40px;
				
			}
		</style>
	</head>
	<body>
	
	<div>
		<p>1</p>
		<p>2</p>
		<P>3</P>
		<P>4</P>
		<p>5</p>
		</div>

在这里插入图片描述

last-child
这个根据英文意思也能理解：就是选定父元素下的最后一个子元素

<style>
			
			div :last-child{
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<p>1</p>
		<p>2</p>
		<P>3</P>
		<P>4</P>
		<p>5</p>
		</div>

运行结果：在这里插入图片描述

only-child
这个选择器我自我感觉有点鸡肋，但是还是要说一下：它的意思是，父元素下唯有一个子元素才能被选中：

<style>
			
			div :only-child{
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<p>1</p>
	//以下p标签是被注释掉了	
<!-- 	<p>2</p>
	<P>3</P>
	<P>4</P>
	<p>5</p> -->
		
		</div>

在这里插入图片描述
这里之所以要注释掉下面的几个P标签是因为only性，父元素下的唯一子元素才能被选中；

nth-child(n)
该选择器是选择父元素下顺数第（n）个子元素：

	div :nth-child(3){
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<p>1</p>
		<p>2</p>
		<P>3</P>
		<P>4</P>
		<p>5</p>
		
		</div>

结果如下：
在这里插入图片描述 5. nth-last-child(n)
这个选择器与上一个类似只不过它选择的对象是倒数的，就不做介绍了。仿照上面的例子就可以轻松理解该选择器

type类型：
他其实有很多思想是与child类似的只不过type是倾向类型选定，而child是倾向逻辑层次的上下级选定

only-of-type
父元素下的唯一相同类型元素：div article:only-of-type{} 意思是div下的article是div里的唯一一个元素
例如：

div article:only-of-type{
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<article>
		<p>1</p>
		<p>2</p>
		</article>
		<P>3</P>
		<P>4</P>
		<p>5</p>
		
		</div>

运行结果
在这里插入图片描述

first-of-type
与first-child类似也是选择第一个元素，但是它是选择同类型中第一个兄弟元素

div article:first-of-type{
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div><P>1</P>
		<article>
		<p>2</p>
		<p>3</p>
		</article>
		
		<article>
		<P>4</P>
		<p>5</p>
		</article>
		</div>

在这里插入图片描述

last-of-type
相信认真看了上面的内容，再看到这里的朋友们，应该已经懂了吧，我就不过多赘述了；直接上代码以及运行结果，看看它的强大之处

	
			div article:last-of-type{
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div><P>1</P>
		<article>
		<p>2</p>
		<p>3</p>
		</article>
		
		<article>
		<P>4</P>
		<p>5</p>
		</article>
		</div>

运行结果：在这里插入图片描述

nth-of-type（n）

	div p:nth-of-type(1){
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<span>0.5</span>
		<P>1</P>
		<p>2</p>
		<p>3</p>
		<P>4</P>
		<p>5</p>
		</div>

在这里插入图片描述
在这里多插入了一个span标签
是便于理解：它是从相同类型的标签开始算起的，并且起始值从一开始而不是0；
5. nth-last-of-type（n）

	div p:nth-last-of-type(1){
				color: #0000FF;
				font-size: 40px;}
		</style>
	</head>
	<body>
	
	<div>
		<span>0.5</span>
		<P>1</P>
		<p>2</p>
		<p>3</p>
		<P>4</P>
		<p>5</p>
		<span>6</span>
		</div>

运行结果
在这里插入图片描述
同理也是一样，它选择的是div下p标签里面的倒数第一个，而不是仅仅直接是倒数第一个的span标签

幕自由人

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学会结构伪类选择器再也不会想每个标签都加 class 和id了

最近在学习css感觉心得犹如喷泉一样狂涌不止，之前学习了结构伪类选择器觉得没啥用，感觉形式冗长，不如类选择器，ID选择器，等简单。但是最近深入学习发现，在一些情况下结构伪类选择器更优于其他选择器结构伪类选择器的优点减少文档内的class 和id属性的定义，使文档更简洁。简单来说就是用了结构伪类选择器比不用结构伪类选择器的文档更简洁。因此弄懂学会结构伪类选择器很重要，关键时刻能节约不少时间下面是我对结构伪类选择器的自我理解我把结构伪类分为了两个部分来说1.-child类型。2.-type类型c
复制链接

扫一扫