CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结

标签的情况

tag:nth-child(n)：很好理解。1.各层级中的第n个元素；2.且该元素是tag
tag:nth-of-type(n)：和上面不一样。1.在各层级中第n个出现的tag元素，与它是在父级下的第几个位置无关。

类的情况

.class:nth-child(n)：和tag模式基本是一致的。1.各层级中的第n个元素；2.是class类
.class:nth-of-type(n)：和tag模式就有些区别了。1.对层级中存在的标签，分别对应找出第n个出现的标签，2.是class类

示例代码

<!DOCTYPE html>
<html>
<head><title>temdiv</title><style>.item:nth-of-type(2){color:red;}</style>
</head>
<body><span>1</span><div>2</div><div><span class="item">type111,child111</span></div><div><div class="item">type111,child111</div></div><div class="item">6</div><div>7</div><div class="item">8</div><span class="item">type222</span><div class="item">10</div><div>11</div><div class="item">12</div><span>13</span><div><span>14</span><span class="item">type222，child222</span><span class="item">16</span><div class="item">type111</div><div class="item">type222</div><div class="item">19</div></div>
</body>
</html>

CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结相关推荐

css伪类选择器记忆技巧,CSS3 伪类选择器 :nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...
css3 伪类选择器
1.target:表示当前的url片段的元素类型,这个元素必须是E (作用类似于选项卡) 2.::before{content:"要添加的内容"} 添加到......之前 3.rg ...
CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）
nth-child(odd):奇数 nth-child(even):偶数使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算. 比如: <li>< ...
《图解CSS3：核心技术与案例实战》——2.4节动态伪类选择器
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第2章,第2.4节动态伪类选择器,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 2.4 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css右箭头,css3 伪类实现右箭头→
css3 实现右箭头→ Document .divtest{ position: absolute; top: 100px; left: 100px; height: 3px; width: 10px ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结

标签的情况

类的情况

CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结相关推荐

最新文章

热门文章