2021-05-15:nth-child :nth-of-ty
2021-05-15 本文已影响0人
swp小小喀嚓鱼
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型
n 可以是数字、关键词或公式。
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
使用数字。第一个子元素的下标是 1
使用关键字。odd，even。odd是奇1，even是偶2
div.a :nth-child(n+3)
image.png
div.a>:nth-child(n+3)
image.png
div.a :nth-of-type(n+3)
image.png
div.a >:nth-of-type(n+3)
image.png
总结
：冒号开头的是对这个元素本身的一种筛选，作用于本身，
nth-child，带上child是包括它的兄弟姐妹的，因为是要考虑位置的，如图所示的p
p:nth-child（6）,p作为孩子，是div.b的孩子，但是div.b不仅仅有p孩子，还有h1孩子，所以要考虑p孩子是排第几位的孩子，跟位置有关系，图中从上到下的方向，最近的p排到了第6
nth-of-type,带上type是合同同名的兄弟姐妹，如图所示的p
p:nth-of-type（1）,p作为孩子，是div.b的孩子,找到所有p孩子，无关乎位置，总有六个，我想要的效果p在第一个
p:nth-of-type（6）是最后一个p
-----------------------------------------
如图p:nth-child（6）p:nth-of-type（1）效果的是一样的，
//（我另外了p:nth-of-type（6）的截图）
image.png
image.png
p:nth-of-type（6）的截图）↓看
image.png
测试代码
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(6)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
</div>
<div class="b">
<h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
</div>
<div class="b">
<h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
</div>
</div>
</body>
</html>
