04 选择器、结构伪类选择器、伪类与伪元素

主要内容：

id	item	description
1	简单选择器	包括简单选择器，class，id，多类符合，层叠等。会涉及到优先级等
2	上下文选择器	包括后代、父子、同级相邻、同级全部
3	结构伪类选择器（不分类）	例如first、last、nth（第n个）、前n个、后n个、倒数第n个等
4	结构伪类选择器（分类）	分二步：1. 元素按类型进行分组 2. 在分组中根据索引进行选择
5	伪类和伪元素	非直接显示，生成的
6	table	这块可以放到下次一起展开

1、简单选择器

这块不展开，多练习就行。

基本原则：大元素直接用，class前用.,id前用#。组合的见下面：

    <style> 
     .item#first {
        background-color: lightpink;
      }
     #first.item {
        background-color: red;
      }
    </style>

但正如老师说的，这个很多时候是装高端的，不容易读。
还有id一般用的不多。估计是class有一定的通识性吧。

不过下面这段代码还是值得记下。可以很快生成一个九宫格：

    <style>
      /* 使用九宫格来演示: grid布局实现 */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  <body>
    <div class="container">
      <div class="item" id="first">皮球</div>
      <div class="item">乐高</div>
      <div class="item">自行车</div>
      <div class="item">ipad</div>
      <div class="item center">图书</div>
      <div class="item">水杯</div>
      <div class="item">作业</div>
      <div class="item">旅游</div>
      <div class="item">睡觉</div>
    </div>
  </body>

2、上下文选择器

   <style>
      /* 1. 后代选择器: 空格 */
      .container div {
        border: 1px solid #000; 
      }
      /* 2. 父子选择器: > */
      body > div {
        border: 5px solid coral;
      }
      /* 3. 同级相邻选择器 */
      .item.center + .item {
        background-color: lightgreen;
      }
      /* 4. 同级所有选择器 */
      .item.center ~ .item {
        background-color: lightsalmon;
      }
    </style>

3、不分类的结构伪类选择器

    <style>
      /* 匹配第一个子元素 */
      .container > *:first-child {
        /* background-color: lightgreen; */
      }
      .container > .item:first-child {
        /* background-color: blue; */
      }
      /* 最后一个子元素 */
      .container > :last-child {
        /* background-color: lightpink; */
      }
      /* 选第3个: 索引是从1开始 */
      .container > :nth-child(3) {
        /* background-color: limegreen; */
      }
      /* 只选择偶数单元格 */
      /* .container > :nth-child(2n) {
        background-color: limegreen;
      } */
      /* 偶数用even表示 */
      .container > :nth-child(even) {
        /* background-color: limegreen; */
      }
      /* 只选择奇数单元格 */
      .container > :nth-child(2n-1) {
        /* background-color: lightsalmon; */
      }
      /* 奇数: odd */
      .container > :nth-child(odd) {
        /* background-color: salmon; */
      }
      /* 从指定位置(从第4个开始)，选择剩下的所有元素 */
      .container > .item:nth-child(n + 4) {
        background-color: limegreen;
      }
      /* 只取前三个。n从0开始，相当于是从第三个向前数，向前减 */
      .container .item:nth-child(-n + 3) {
        background-color: salmon;
      }
      /* -0 + 3 = 3
      -1 + 3 = 2
      -2 + 3 = 1 */
      /* 只取最后三个。同样可以理解为n从0开始，然后不断－。注意这个中间是的“last” */
      .container .item:nth-last-child(-n + 3) {
        background-color: salmon;
      }
      /* 取第8个，用倒数的方式更直观 */
      .container .item:nth-last-child(2) {
        background-color: yellow;
      }
    </style>

4、分类的结构伪类选择器

  /* 分组结构伪类分二步：
  1. 元素按类型进行分组
  2. 在分组中根据索引进行选择 */

    <style>
      .container div:last-of-type {
        background-color: violet;
      }
      /* 在分组中匹配任何一个 */
      .container span:nth-of-type(3) {
        background-color: violet;
      }
      /* 前三个 */
      .container span:nth-of-type(-n + 3) {
        background-color: red;
      }
      /* 最后二个 */
      .container span:nth-last-of-type(-n + 2) {
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">妖怪1/div>
      <div class="item">妖怪2</div>
      <div class="item">妖怪3</div>
      <span class="item">妖怪4</span>
      <span class="item">妖怪5</span>
      <span class="item">妖怪6</span>
      <span class="item">妖怪7</span>
      <span class="item">妖怪8</span>
      <span class="item">妖怪9</span>
    </div>
  </body>

5、伪类和伪元素（form表）

重点（:target（选中当前目标），:focus（获得焦点），::selection（被选中时））

应用场景：美化表单。

   <style>
        body {
            background-color: cadetblue;
        }
        .label{
            color: white;
        }
        #test{
            display: none;
        }
      /* :target: 必须id配合，实现锚点操作 */
      /* 当前#test的表单元素被a的锚点激活的时候执行 */
        #test:target{
            display: block;
        }
      /* :focus: 当获取焦点的时候 */
        input:focus{
            background-color: turquoise;
            color: tomato;
        }
      /* ::selection: 设置选中文本的前景色与背景色 */
        input::selection{
            background-color: yellowgreen;
            color: red;
        }
    </style>
<body>
    <button onclick="location='#test'">测测你是妖怪还是神仙</button>
    <form action="" method="POST" name="test" id="test">
        <label class="label" for="real">你的真身</label>
        <input type="text" name="real" id="real">
        <br>
        <label class="label" for="age" >你的非凡龄</label>
        <input type="int" name="age" id="age">
    </form>
</body>

6、伪类和伪元素（list）

双冒号::后面也跟很多东西，这块后续也逐渐了解起来。

    <style>
        body{
            background-color: seagreen;
        }
        /* :not(): 用于选择不满足条件元素。list下的所有元素，除了第二个
        注意：css中的索引不是从0开始，而是从1开始。*/
        .list > :not(:nth-of-type(2)) {
            color:yellow;
        }
        /* ::before,::after添加元素 */
        .list::before{
            content: "类型选择";
            font-size: 20px;
            color:white;
            border-bottom: 1px solid white;
        }
        .list::after{
            content: "终生注定";
            font-size: 20px;
            color:yellow;
            border-bottom: 1px solid white;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>神仙</li>
        <li>妖怪</li>
        <li>外星人</li>
        <li>地本人</li>
        <li>神妖人</li>
        <li>地外人</li>
    </ul>
</body>

主要内容：

1、简单选择器

基本原则：大元素直接用，class前用.,id前用#。组合的见下面：

2、上下文选择器

3、不分类的结构伪类选择器

4、分类的结构伪类选择器

5、伪类和伪元素（form表）

重点（:target（选中当前目标），:focus（获得焦点），::selection（被选中时））

应用场景：美化表单。

6、伪类和伪元素（list）

双冒号::后面也跟很多东西，这块后续也逐渐了解起来。

相关文章