参考资料

  1. CSS浮动详细说明以及案例
  2. CSS 阴影效果设置
  3. ui状态伪类选择器详细说明以及案例
  4. flex-direction: row/column
  5. display: flex/inline-flex示例
  6. css样式div居中
  7. * 通配符选择器详细说明以及案例
  8. 伪元素选择器详细说明以及案例

结构伪类选择器用于根据元素在文档树中的位置来选择元素。常见的结构伪类选择器包括：

  1. :first-child：选择作为其父元素的第一个子元素的元素。

    • 案例：p:first-child 选择所有作为其父元素第一个子元素的 <p> 标签。

  2. :last-child：选择作为其父元素的最后一个子元素的元素。

    • 案例：p:last-child 选择所有作为其父元素最后一个子元素的 <p> 标签。

  3. :nth-child(n)：选择作为其父元素的第 n 个子元素的元素。

    • 案例：p:nth-child(2) 选择所有作为其父元素第二个子元素的 <p> 标签。

  4. :nth-last-child(n)：选择作为其父元素的倒数第 n 个子元素的元素。

    • 案例：p:nth-last-child(2) 选择所有作为其父元素倒数第二个子元素的 <p> 标签。

  5. :first-of-type：选择作为其父元素下同类型元素的第一个元素。

    • 案例：p:first-of-type 选择所有作为其父元素下第一个 <p> 标签。

  6. :last-of-type：选择作为其父元素下同类型元素的最后一个元素。

    • 案例：p:last-of-type 选择所有作为其父元素下最后一个 <p> 标签。

  7. :nth-of-type(n)：选择作为其父元素下同类型元素的第 n 个元素。

    • 案例：p:nth-of-type(2) 选择所有作为其父元素下第二个 <p> 标签。

  8. :nth-last-of-type(n)：选择作为其父元素下同类型元素的倒数第 n 个元素。

    • 案例：p:nth-last-of-type(2) 选择所有作为其父元素下倒数第二个 <p> 标签。

  9. :only-child：选择作为其父元素的唯一子元素的元素。

    • 案例：p:only-child 选择所有作为其父元素唯一子元素的 <p> 标签。

  10. :only-of-type：选择作为其父元素下同类型元素的唯一元素。

    • 案例：p:only-of-type 选择所有作为其父元素下唯一 <p> 标签。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。