关于nth-of-type的用法

最新推荐文章于 2023-04-18 11:16:23 发布
最新推荐文章于 2023-04-18 11:16:23 发布
阅读量287 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45424679/article/details/112689464
版权
本文详细介绍了CSS选择器:nth-of-type的工作原理和应用场景，通过实例解析其如何选择同类型元素。了解这一选择器能帮助开发者更精确地控制页面样式，提升网页布局的灵活性。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div :nth-child(1) {
最低0.47元/天 解锁文章
故事只若初见
关注
jquery+js实现修改div元素的背景色
cyrrgt的博客
10-27 661
效果展示 这是效果样式 代码参考 这是CSS代码 <style type="text/css"> .blue{ width: 200px; height: 200px; background-color: blue; } </style> 这是HTML代码 &...
CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 719
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
JavaScript节点的方式修改元素的背景颜色
weixin_30517001的博客
07-26 771
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; ...
nth-of-type()的用法
weixin_33694172的博客
10-18 327
同样的标签选择其中一个，就用nth-of-type() <img src="http://cms-bucket.nosdn.127.net/2018/10/16/ad8698e497e14974a57dfbfa917b06d7.jpeg"> <img src="http://cms-bucket.nosdn.127.net/2018/10/16/ad8698e497e1...
CSS3伪类nth-of-type(n)用法详解
u013864585的专栏
06-20 2388
CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。 如下代码： .comments-template ol li:nth-of-type(odd) { background:#DBF1D4; } 上面的代码是指
javascript增加节点和改变背景色
鑫少爷的专栏
05-10 1246
 代码：dl id="d">dt id="daaa">dt1dt>dd>dd1dd>dl>显示  dl id="d">dt id="daaa">dt1dt>dd>dd1dd>dl>SCRIPT LANGUAGE="JavaScript" type="text/javascript">var d=document.getElementById("d");   
css :nth-child与:nth-of-type之小解
09-25
`:nth-child()`和`:nth-of-type()`在现代浏览器（如Safari 3.1+、IE9+、Firefox 3.5+、Opera 9.5+、Chrome 2+）中已经得到广泛支持。然而，对于老旧浏览器，可能需要借助jQuery等库来实现类似功能。值得注意的是，...
CSS3新增nth-of-type选择器及与nth-child区别
WangZhang_521的博客
01-05 143
CSS3新增nth-of-type选择器及与nth-child区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
css伪类nth-child，nth-of-type的顺序是怎么计数的呢？
haoyanyu_的博客
07-31 501
今天遇到一个坑 项目中写css时，如果一个容器里有多个子元素，但是子元素的样式并不是完全一样的，稍微有点差异，这个时候一般通过nth-child(n)，或者nth-of-type(n)定制子元素的样式。 那么n是如何计数的呢？ 在这里一直有一个误解，惭愧惭愧～～???? 如下代码 <div class="content"> <p>水平垂直居中， justify-content, align-items</p> <div class="layout allce
nth-of-type(n)选择器
09-18 705
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是
:nth-child()与:nth-of-type()的使用方法及区别
weixin_43762150的博客
07-08 549
1. 简介 本文主要讨论伪类选择器 :nth-child()与:nth-of-type()的使用方法及区别，并引申:first-child的使用方法 2. :nth-child(n)和:nth-of-type()的使用方法及区别 2.1 定义 类别 定义 :nth-child(n) 匹配父级元素中的第n个子元素，子元素类型没有限制 p:nth-child(2) 匹配在父级中位于第二位的p元素。换言之，匹配父级的第二个子元素，且该子元素为p。 :nth-of-type(n) 匹配父
三种选择器改变元素的颜色
wangsong97的博客
10-27 1020
我这里写了三种最简单的选择器 分别是 id选择器 元素选择器 类选择器 更多的选择器可以去api 上找 当然 想要api的可以私信我呦 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> &l...
javascript当中nth-of-type选择器使用的一个坑
动感超人的博客
03-15 1006
文章目录前景一开始想到的为什么没有用?分析设置代码的,浏览器做了什么浏览器做了什么示意图再来举个例子 前景 一段HTML代码,我需要让第一个content的div背景设置为红色 js代码 <div class="header">1</div> <div class="content">2</div> <div class="header">3</div> <div class="content"&
nth-child(x)与nth-of-type(x)用法
fairycode的博客
03-15 308
近期在复习前端，现在html css进行到form表单 即将进入js阶段：） 码码后想达到的效果大概如此 input text radio select textarea等 在html内给几个小标题用了同样的class <form action=""> <div class="title">姓名</div> <input type="text" > <div class="title">昵称</div&
CSS中nth type和child的区别
Ethereality_aron的博客
12-05 859
CSS中nth type和child的区别
CSS nth-child选择器和nth-type选择器
weixin_30349597的博客
11-30 228
:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。...
JavaScript改变元素的背景颜色
weixin_55017780的博客
05-29 4489
改变元素的背景颜色是通过点击某个特定的按钮，来获取元素来改变背景颜色。 其实现的原理也非常的简单 首先第一步 页面的布局： 先设置几个div盒子可供点击和选择的点击的事件，给他们几个类和id，方便设置他们的css样式和js获取事件。 ...
CSS3中nth-of-type和nth-child选择器区别分析和理解
让我去流浪啊
07-18 1014
第一层 按照网上的理解，p:nth-of-type(2)表示选择第二个p标签，而p:nth-child(2)表示选择一个p标签并且这个标签是父元素的第二个子元素。p:nth-of-type(2)表示子元素中的第二个p标签。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;style type="text/cs...
通过js实现切换背景颜色
最新发布
vicky000001的博客
04-18 3972
【代码】通过js实现切换背景颜色。
nth-child 和nth-type
03-16
两种选择器的使用方法如下： 1. nth-child(n) “nth-child”选择器可以使用一个整数参数 n，表示要选择父元素中第 n 个子元素。例如，要选择一个列表中的第三个列表项，可以使用以下代码： ``` ul li:nth-child(3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故事只若初见

坚持就是胜利

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值