css怎样修改第n个元素样式-css教程-PHP中文网

css怎样修改第n个元素样式

WBOY

发布： 2021-11-23 11:39:35

原创

4594人浏览过

在css中，可以利用“:nth-child”选择器来选中第n个元素并修改该元素的样式，该选择器能匹配属于其父元素的第n个子元素，不论元素的类型，语法为“:nth-child(n){修改内容;}”。

css怎样修改第n个元素样式

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

css怎样修改第n个元素样式

在css中可以使用:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。然后在去修改，n 可以是数字、关键词或公式。

示例如下：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1875">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6c50ec09de372.png" alt="Upscale">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1875">Upscale</a>
                            <p>AI图片放大工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Upscale">
                                <span>85</span>
                            </div>
                        </div>
                        <a href="/ai/1875" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Upscale">
                        </a>
                    </div>
                
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>

登录后复制

输出结果：

1123.09.png