所有代码的注释和介绍

<!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>
Correcting teacher：
PHPz

Correction status：qualified

Teacher's comments：实例可以作出一定的划分，可以不必挤在一个代码块中，分开来看起来更加简洁
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
0917作业-安装插件及emmet语法案例

2021-09-18 14:09:19