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>

 

posted on   QiKS  阅读(41)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示