css :first-of-type 和 ~

동경

于 2021-01-28 10:02:15 发布

阅读量235

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43814775/article/details/113308621

版权

Vue 专栏收录该内容

28 篇文章

订阅专栏

这篇博客探讨了CSS中的:first-of-type和~选择器的用法。`:first-of-type`用于选择父元素中的第一个特定类型元素，而~选择器则用于选择指定元素之后的所有兄弟元素。文中通过实例展示了如何使用这些选择器来改变元素的样式，例如设置背景颜色和间距。此外，还提到了实际应用场景，如在前端开发中调整按钮的间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:first-of-type

选择的 p 元素是其父元素的第一个 p 元素：

p:first-of-type
{
    background:#ff0000;
}

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：


    p~ul{
　　     background:#ff0000;
        }
 
      <p>快乐生活</p>
      <ul>
　　    <li>生活</li>
　　    <li>生活</li>
　　    <li>生活</li>
      </ul>

例子：

&:first-of-type ~ .ant-btn {
                margin-left: 21px;
            }

第一个元素后面的所有 .ant-btn margin-left 为 21px