css选择器

1. 简单选择器
   

   权重：标签 <class属性<id属性

<div class="container">
      <div class="item" id="first">1</div>
      <div class="item">2</div>
      <div class="item" title="php">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item" title="hello">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

<style>
      /* 使用九宫格演示简单选择器 */

      /* 类选择器：选择一类元素，也属于属性选择器的一种，对应元素中的class */
      .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;
      }

      /* 元素选择器 */
      body {
        background-color: lightcyan;
      }

      /* 多个类选择器 */
      .item.center {
        background-color: lightgreen;
      }

      /* id选择器 */
      #first {
        background-color: lime;
      }
      /* id,class可以添加到任何元素，前面的元素限定符默认就是*，所以可以省略 */
      div#first {
        background-color: lime;
      }
      /* 类选择器，class  权重大于  标签 */
      .item#first {
        background-color: lightpink;
      }
      /* id的权重大于class */
      #first.item {
        background-color: violet;
      }

      /* 标签  < class属性 < id属性 */

      /* 属性选择器 */
      .item[title="php"] {
        background-color: lightcoral;
      }

      *#first,
      .item.center,
      .item[title="hello"] {
        background-color: black;
      }
    </style>

2.上下文选择器

后代选择器：选择当前元素的所有后代元素

父子选择器：只选择当前元素的子元素

同邻相邻选择器：拥有共同父级的相邻元素

通邻所有选择器：拥有共同父级的所有元素

<style>
      /* 后代选择器   所有子代的div都受影响*/
      /* .container div {
        border: 1px solid coral;
      } */

      /* 父子选择器   只有外层的div受影响*/
      /* body > div {
        border: 3px solid green;
      } */

      /* 使用后代选择器模拟父子选择器 */
      body div.container {
        border: 3px solid green;
      }

      /* 同级相邻选择器 */
      /* 选择与第五个相邻的，即后面的一个元素 */
      /* .item.center + .item {
        background-color: lightgreen;
      } */

      /* 同级所有选择器 */
      /* 选择与第五个后面的，有共同父级的所有兄弟元素 */
      .item.center ~ .item {
        background-color: lightgreen;
      }
    </style>

3.伪类

3.1不分组匹配

first-child：匹配第一个子元素

last-child：匹配最后一个子元素

nth-child（n）:匹配第n个位置的子元素

nth-last-child(n):匹配倒数第n个位置的子元素

<style>
      /* 使用九宫格演示简单选择器 */
      /* body,第一个单元格都变了 */
      /* 为了防止递归，应该在具体父元素上调用伪类 */
      /* :nth-child(1) --- :first-child */
      div > .item:first-child {
        /* background-color: wheat; */
      }

      /* 匹配最后一个 */
      .container > :last-child {
        /* background-color: lightpink; */
      }

      /* 匹配任何一个 */
      /* 索引从1开始计算 */
      .container > :nth-child(3) {
        /* background-color: lightgreen; */
      }

      /* :nth-child(n)  n:n支持表达式 */
      /* 当n在表达式中的时，从0开始的 */
      .container > :nth-child(2n) {
        /* background-color: magenta; */
      }

      /* even:代表偶数 */
      .container > :nth-child(even) {
        /* background-color: magenta; */
      }

      /* 选择奇数 */
      .container > :nth-child(2n-1) {
        /* background-color: lightsalmon; */
      }

      /* even:代表偶数 */
      .container > :nth-child(odd) {
        /* background-color: lightsalmon; */
      }

      /* 只选择前三个 */
      /* n:从0开始 */
      .container > :nth-child(-n + 3) {
        /* background-color: lightgreen; */
      }

      /* 选择倒数第二个 */
      .container > :nth-last-child(2) {
        /* background-color: lime; */
      }

      /* 从第四个开始，选择剩下的所有元素 */
      .container > :nth-child(n + 4) {
        background-color: lightgray;
      }
    </style>

3.2分组匹配

first-of-type：匹配按类型分组的第一个子元素

last-of-type：匹配按类型分组的最后一个子元素

nth-of-type（n）:匹配按类型分组的第n个位置的子元素

nth-last-of-type(n):匹配按类型分组的倒数第n个位置的子元素

<style>
      .container span:first-of-type {
        background-color: violet;
      }

      .container span:last-of-type {
        background-color: violet;
      }

      /* span分组的前三个 */
      .container span:nth-of-type(-n+3) {
        background-color: gray;
      }

      .container span:nth-last-of-type(-n + 2) {
        background-color: coral;
      }
    </style>

4.表单状态选择器

<style>
      :root {
        background-color: lightgreen;
      }
      input:enabled {
        background-color: blanchedalmond;
      }

      input:disabled {
        background-color: lightgreen;
      }

      input:required {
        background-color: yellow;
      }

      input:hover {
        background-color: red;
      }

      :link {
        background-color: royalblue;
      }

      :visited {
        background-color: slateblue;
      }
    </style>

总结：今天主要学习的是选择器知识，后面我们使用css改变html样式几乎都是用选择器来处理，。简单选择器和上下文选择器还好，理解起来比较容易。到了伪类选择器可能理解起来相对难，这块在后期的学习以及操作中要多练习，伪类选择器选择元素非常方便这点是其他选择器都没法比的。最后学了点表单状态选择器，这个在以后表单注册登录中应该会用的比较多，比如注册是没有输密码就可以使用这个来提示用户。