nth-of-type
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
这些都可以填充表达式、数字等 CSS好强大
- :first-of-type p:first-of-type 选择属于其父元素的首个p元素的每个 p元素。
- :last-of-type p:last-of-type 选择属于其父元素的最后p 元素的每个 p元素。
- :only-of-type p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p元素。
- :only-child p:only-child 选择属于其父元素的唯一子元素的每个p 元素。
- :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p元素。
- :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
- :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个p 元素的每个p元素。
- :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
- :last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素。
1947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
