CSS常用选择器
p:nth-child(n) 指定选择的元素
选择第二个元素
p:nth-child(2)
选择所有元素
p:nth-child(n)
选择包括第二个在内的所有元素
/* 表示.headcontent > .userSetting-item headcontent的所有子元素.userSetting-item*/
.headcontent > .userSetting-item:nth-child(n + 2) {
margin-top: 20px;
}
选择奇数元素
p:nth-child(n)
选择偶数元素
p:nth-child(2n)
p:first-child 选择属于其父元素的首个子元素的每个 <p> 元素
<body>
<p>这个段落是其父元素(body)的首个子元素。</p> //选择 <h1>欢迎访问我的主页</h1> <p>这个段落不是其父元素的首个子元素。</p> <div> <p>这个段落是其父元素(div)的首个子元素。</p> //选择 <p>这个段落不是其父元素的首个子元素。</p> </div> <p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>。</p>
<body>
.formdata >>> .el-form-item__content:first-child { text-align: right; }
p:last-child指定属于其父元素的最后一个子元素的 p 元素
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?