css中nth的用法是什么-前端问答-PHP中文网

css中nth的用法是什么

首页

web前端

前端问答

css中nth的用法是什么

Apr 27, 2022 pm 06:34 PM

css

nth用法：1、“:nth-child(n)”匹配第n个子元素；2、“:nth-last-child(n)”倒数匹配第n个子元素；3、“:nth-of-type(n)”匹配同类第n个子元素；4、“:nth-last-of-type(n)”。

css中nth的用法是什么

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css中nth的用法是什么

1、:nth-child(n)

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

示例如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt; 
&lt;title&gt;123&lt;/title&gt; 
&lt;style&gt; 
p:nth-child(2)
{
background:#ff0000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;这是一个标题&lt;/h1&gt;
&lt;p&gt;这是第一个段落。&lt;/p&gt;
&lt;p&gt;这是第二个段落。&lt;/p&gt;
&lt;p&gt;这是第三个段落。&lt;/p&gt;
&lt;p&gt;这是第四个段落。&lt;/p&gt;
&lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

输出结果：

2、:nth-last-child(n)

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n可以是一个数字，一个关键字，或者一个公式。

示例如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt; 
&lt;title&gt;123&lt;/title&gt; 
&lt;style&gt; 
p:nth-last-child(2)
{
background:#ff0000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;The first paragraph.&lt;/p&gt;
&lt;p&gt;The second paragraph.&lt;/p&gt;
&lt;p&gt;The third paragraph.&lt;/p&gt;
&lt;p&gt;The fourth paragraph.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 8 以及更早版本的浏览器不支持:nth-last-child()选择器.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

输出结果：

3、:nth-of-type(n)

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

示例如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt; 
&lt;title&gt;123&lt;/title&gt; 
&lt;style&gt; 
p:nth-of-type(2)
{
background:#ff0000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;This is a heading&lt;/h1&gt;
&lt;p&gt;The first paragraph.&lt;/p&gt;
&lt;p&gt;The second paragraph.&lt;/p&gt;
&lt;p&gt;The third paragraph.&lt;/p&gt;
&lt;p&gt;The fourth paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

输出结果：

4、:nth-last-of-type(n)

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

n 可以是一个数字，一个关键字，或者一个公式。

示例如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt; 
&lt;title&gt;123&lt;/title&gt; 
&lt;style&gt; 
p:nth-last-of-type(2)
{
background:#ff0000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;This is a heading&lt;/h1&gt;
&lt;p&gt;The first paragraph.&lt;/p&gt;
&lt;p&gt;The second paragraph.&lt;/p&gt;
&lt;p&gt;The third paragraph.&lt;/p&gt;
&lt;p&gt;The fourth paragraph.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;注意:&lt;/b&gt; Internet Explorer 8以及更早版本的浏览器不支持:nth-last-of-type() 选择器.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

输出结果：