结构伪类选择器—查找单个—查找多个—nth-of-type和伪元素

小琳爱分享

已于 2022-07-23 21:40:46 修改

阅读量349

点赞数 1

分类专栏： css 文章标签：前端 javascript html

于 2022-07-22 18:31:33 首次发布

本文链接：https://blog.csdn.net/qq_45708377/article/details/125937964

版权

本文介绍了CSS中的结构伪类选择器，包括如何查找单个和多个子元素，重点讨论了nth-of-type选择器的用法，它允许根据元素类型和顺序来精确控制样式。同时，文章还提到了伪元素的相关概念。

摘要由CSDN通过智能技术生成

① 结构伪类选择器—查找单个

常用于查找父级选择器中的子元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* 1、找到第一个子元素，并且为li标签 */
    li:first-child {
      /* background-color: blue; */
    }
    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child {
      /* background-color: orange; */
    }
    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3) {
      /* background-color: pink; */
    }
    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-last-child(3) {
      bac