CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布

原创最新推荐文章于 2024-10-22 09:22:43 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文详细介绍了CSS中的选择器，特别是:nth-of-type(n)选择器的使用方法，通过实例展示了如何选择特定类型的元素。

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 元素。