您的位置：首页 > Web前端 > CSS

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

2018-01-30 11:20 846 查看

标签的情况

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 css选择器
相关文章推荐
新的分享
章节导航