js学习-结构性伪类选择器下

最新推荐文章于 2023-11-07 12:09:48 发布

kaka_hikun

最新推荐文章于 2023-11-07 12:09:48 发布

阅读量237

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106479831

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

6、选择器first-child、last-child、nth-child和nth-last-child

1）first-child

单独指第一个子元素的样式

2）last-child

单独指最后一个子元素的样式

3）nth-child

nth-child（n）匹配正数下来第N个子元素
nth-child (odd) 匹配正数下来第奇数个子元素
nth-child (even) 匹配正数下来第偶数个子元素

<style>
li:first-child{
    background: #ff6600;
}
li:last-child{
    background: green; 
}
li:nth-child(odd){
    background: red;  /*奇数*/
}
li:nth-child(even){
    background: #ff6600;  /*偶数*/
}
</style>
<body>
	<ul>
	    <li>第一个项目</li>
	    <li>第二个项目</li>
	    <li>第三个项目</li>
	    <li>第一个项目</li>
	    <li>第一个项目</li>
	    <li>第一个项目</li>
	    <li>第一个项目</li>
	    <li>第一个项目</li>
	</ul>
</body>

部分结果：
在这里插入图片描述

4）nth-last-child

nth-last-child（n）匹配倒数下来第N个子元素
nth-last-child (odd) 匹配倒数下来第奇数个子元素
nth-last-child (even) 匹配倒数下来第偶数个子元素

7、选择器nth-of-type和nth-last-type

1)、在使用nth-child和nth-last-child产生的问题

<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>

如果使用nth-child(odd)，显示结果是所有的h2行都会变掉，但是我们想实现的是第一行和第三行h2改变，问题在于nth-child把p行加入进去了

2）、使用nth-of-type和nth-last-of-type

nth-of-type：正数
nth-last-of-type：倒数
使用nth-of-type，就能实现同一元素的改变。

8、循环使用样式

nth-child(An+B)，A表示每次循环中包括几种样式，B表示指定的样式在循环中所处的位置

<style>
	li:nth-child(4n+1){
		background: #000000;
	}
	li:nth-child(4n+2){
  		background: #ffffff;
 	}
 	li:nth-child(4n+3){
    		background: #ff1b00;
  	}
 	li:nth-child(4n+4){
    		background: green;
 	}
</style>
<body>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
	<li>第一个项目</li>
</body>

显示结果：
在这里插入图片描述

kaka_hikun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习-结构性伪类选择器下

6、选择器first-child、last-child、nth-child和nth-last-child1）first-child单独指第一个子元素的样式2）last-child单独指最后一个子元素的样式3）nth-childnth-child（n）匹配正数下来第N个子元素nth-child (odd) 匹配正数下来第奇数个子元素nth-child (even) 匹配正数下来第偶数个子元素<style>li:first-child{ background: #ff66
复制链接

扫一扫