所有代码的注释和介绍

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9.23作业</title>
    <link rel="stylesheet" href="/PHP/ico/iconfont.css" />
    <script src="/PHP/ico/iconfont.js"></script>
  </head>
  <body>
    <!-- 选择器-伪类写法要领和实例 -->
    <!-- ↓------------------------------>
    <!-- 方式一：
      普通的针对样式写法 
    -->
    <h2>实例一</h2>
    <ul class="a">
      <li>b</li>
      <!-- ↓指定该位置样式↓ -->
      <li class="c">c</li>
      <li>d</li>
    </ul>
    <style>
      .a .c {color: #FF0000;};
    </style>
    <hr>
    <!-- ↓------------------------------>
    <!-- 方式二：
      针对指定代码行数做样式写法
      (父子级下指定位置都生效) 
    -->
    <h2>实例二</h2>
    <ul class="aa">
      <li>b</li>
      <!-- ↓指定该位置样式↓ -->
      <li>c</li>
      <li>d</li>
    </ul>
    <style>
      /* :nth-of-t.ype(2) 其中的2代表定位到该位置 */
      .aa :nth-of-type(2) {color: #FFFF00;};
    </style>
    <hr>
    <!-- ↓------------------------------>
    <!-- 方式三：
      针对指定代码行数做样式写法
      (不想让子级的第二个也被选中的,且指定父级用的写法)
    -->
    <h2>实例三</h2>
    <ul class="aaa">
      <li>b</li>
      <!-- ↓指定该位置样式↓ -->
      <li>c</li>
      <li>d</li>
      <li>
        b
        <ul>
          <li>b1</li>
          <!-- ↓指定该位置不享受样式↓ -->
          <li>b2</li>
          <li>b3</li>
        </ul>
      </li>
    </ul>
    <style>
      /* 下面这个写法就是会把所有的下级有2个元素的都样式了 */
      /* .aaa :nth-of-type(2) {color: #0000FF;}; */
      /* 只要在a的类前面加个>即可 忽略了下级了 */
      .aaa > :nth-of-type(2) {
      color: #0000FF;
      /* background-color: #0000FF */
      };
    </style>
    <hr>
    <!-- ↓------------------------------>
    <!-- 方式四：
      : nth-of-type(X)
      1.定位是有个匹配机制，先组合元素再进行分配定位
      2.标签可不限制排列在一起，因为浏览器会自动组合在匹配
      3.想指定元素来定位就要在:nth-of-t.ype(X) :前面加是标签
      (以下方为例，我写加个p标签想定位2就要写2个p标签才可以)
    -->
    <h2>实例四</h2>
    <ul class="aaaa">
      <li>b</li>
      <!-- ↓指定该位置2样式↓ -->
      <li>c</li>
      <li>d</li>
      <li>b</li>
      <p>e</p>
      <!-- ↓指定该位置2样式↓ -->
      <p>r</p>
      </li>
    </ul>
    <style>
      /* 只要在a的类前面加个>即可 忽略了下级了 */
      .aaaa > p:nth-of-type(2) {color: #00FF00;};
    </style>
    <hr>
    <!-- ↓------------------------------>
    <!-- 方式五：
      如果下指定同级、父级或下级的代码有样式不想都父子级都显示就用下面写法
      :nth-of-type(行数):not(标签:nth-of-type(行数))
    -->
    <h2>实例五</h2>
    <ul class="a5">
      <li>b</li>
      <!-- ↓指定排查li的2位置样式↓ -->
      <li>c</li>
      <li>d</li>
      <li>b</li>
      <p>p1</p>
      <!-- ↓指定显示p的2位置样式↓ -->
      <p>p2</p>
      <p>p3</p>
    </ul>
    <style>
      .a5 > :nth-of-type(2):not(li:nth-of-type(2)) {
        background-color: #0000FF
      }
    </style>
    <hr>
    <!-- ↓------------------------------>
    <!-- 方式六：
      针对指定位置的写法
    -->
    <h2>实例六</h2>
    <ul class="a6">
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
    </ul>
    <style>
      /* 抓取第一个来样式 
      有专门的选择器写法，也可输入行数
      */
      /* 方法1： */
      /* .a6 > :nth-of-type(1) {
        background-color: #0000FF
      } */
      /* 方法2： */
      /* .a6 > :first-of-type {
        background-color: #0000FF
      } */
      /* 抓取最后一个来样式选择器 */
      /* .a6 > :last-of-type {
        background-color: #0000FF
      } */
      /* 倒数上去的获取选择器写法 */
      .a6 > li:nth-last-of-type(3) {
        background-color: #0000FF
      }
    </style>
    <hr>
    <h2>伪类选择器的参数</h2>
    <ul class="b1">
      <li>yanshi</li>
      <li>yanshi</li>
      <li>yanshi</li>
      <li class="bb">yanshi</li>
      <li>yanshi</li>
      <li>yanshi</li>
    </ul>
    <style>
      /* :nth-of-type(参数)
      公式： 
      参数 = an+b   a,n.b =[0,1,2,3,4,5,....]
      a:  系数，n：计数器/方式，b：偏移量/行数 用于PHP分页参数居多
      元素的有效编号：必须从1开始，n和b都是从0开始
      */
      /* 以下写法是说明在第三行做样式(0n=单选+3=第二行) */
      /* .b1 > :nth-of-type(0n+2) {
        background-color: #0000FF
      } */
      /* 以下写法是全部选中做样式最大权重(n=全选) */
      /* .b1 > :nth-of-type(n) {
        background-color: #0000FF
      } */
      /* 以下写法是从第二行起下面都做样式(n=全选+2=第二行) 
      原本写法是1n+2,但因为1*所有数字都不变，所以1可以不用写直接用n即可
      */
      /* .b1 > :nth-of-type(n+2) {
        background-color: #0000FF
      } */
      /* 以下写法是每隔2行就做样式(2n=偶数进行) 以此类推场景*/
      /* .b1 > :nth-of-type(2n) {
        background-color: #0000FF
      } */
        /* 偶数简便的写法(even=偶数) */
        /* .b1 > :nth-of-type(even) {
        background-color: #0000FF
      } */
      /* 奇数简便的写法(2n=偶数+1=奇数开始)
      简写是:nth-of-type(odd)
       */
      /* .b1 > :nth-of-type(2n+1) {
        background-color: #0000FF
      }  */
      /* 以下写法是抓取前三做样式(-n) 
      算法：
      -1*0+3=3
      -1*1+3=2
      -1*2+3=1
      -1*3+3=0(非法索引，匹配就结束了)
      */
      /* .b1 > :nth-of-type(-n+3) {
        background-color: #0000FF
      } */
      /* 以下写法是抓取后三做样式,换选择器(-n) 
      算法：
      -1*0+3=3
      -1*1+3=2
      -1*2+3=1
      -1*3+3=0(非法索引，匹配就结束了)
      */
      .b1 > :nth-last-of-type(-n+3) {
        background-color: #0000FF
      }
      /* 总结：
      1.获取指定的某一个：(b)
      2.获取前几个：(n-b)
      3.获取指定位置后的全部元素：(n+b)
      4.获取全部偶数(2n或even)或全部奇数(2n+1或odd)元素 */
      /* 以下写法是针对根元素来做样式 */ 
      /* 写法1：*/
      /* html {background-color: #0000FF} */
      /* 写法2：*/
      /* :root {background-color: #0000FF} */
      /* 或者用class来定位写法也可以 第三行class如下： */
      /* 写法1： */
      /* .b1 .bb ~ * {样式代码} */
      /* 写法2： */
      /* .b1 .bb ~ li {样式代码} */
      /* 以上写法要增加class才可触发 */
    </style>
    <hr>
    <h2>表单的激活/禁用样式控制</h2>
    激活：<input type="text">
    <br>
    禁用：<input type="text" disabled>
    <style>
      /* 以下写法是针对表单的激活/禁用 的框做样式 */
      /* 激活状态 */
      input:enabled {background-color: #0000FF}
      /* 禁用状态 */
      input:disabled {background-color: #8b062e} 
    </style>
<!-- 字体图标 -->
    <hr>
    <h2>字体图标</h2>
    <h4>CSS方式引用</h4>
    <span class="iconfont icon-jingdong">JDlogo</span>
    <style>
      .iconfont.icon-jingdong {
        color: rgb(255, 0, 0);
        font-size: 500%;
      }
    </style>
    <br>
    <h4>JS方式引用</h4>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-jingdongicon-"></use>
    </svg>
  </body>
</html>