-
使用
:first-child伪类:first-child伪类用于选取属于其父元素的首个子元素。这个选择器匹配的元素是父元素的第一个子元素，而不是第一个子元素的第一个子元素。
例如，如果我们有一个HTML结构如下：
<div> <p>这是第一个段落。</p> <p>这是第二个段落。</p> </div>我们可以使用以下CSS选择器来选择第一个
<p>元素：div > p:first-child { color: red; } -
使用
:nth-child(1)选择器:nth-child(n)选择器用于选取属于其父元素的第n个子元素。这个选择器匹配的元素是父元素的第n个子元素，而不是第n个子元素的第一个子元素。例如，如果我们有一个HTML结构如下：
<div> <p>这是第一个段落。</p> <p>这是第二个段落。</p> </div>我们可以使用以下CSS选择器来选择第一个
<p>元素：div > p:nth-child(1) { color: red; } -
使用
:first-of-type伪类:first-of-type伪类用于选取属于其父元素的首个特定类型的子元素。这个选择器匹配的元素是父元素的首个特定类型的子元素，而不是第一个子元素的第一个子元素。例如，如果我们有一个HTML结构如下：
<div> <p>这是第一个段落。</p> <h1>这是标题。</h1> <p>这是第二个段落。</p> </div>我们可以使用以下CSS选择器来选择第一个
<p>元素：
div > p:first-of-type { color: red; } -
使用
:nth-of-type(n)选择器:nth-of-type(n)选择器用于选取属于其父元素的第n个特定类型的子元素。这个选择器匹配的元素是父元素的第n个特定类型的子元素，而不是第n个子元素的第一个子元素。例如，如果我们有一个HTML结构如下：
<div> <p>这是第一个段落。</p> <h1>这是标题。</h1> <p>这是第二个段落。</p> </div>我们可以使用以下CSS选择器来选择第一个
<p>元素：div > p:nth-of-type(1) { color: red; }
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/124307.html
微信扫一扫 