结构伪类选择器

/* 结论：
a = 0： 选中单个匹配。
a = 1： 正向，向下匹配。
a = -1：反向，向上匹配。
a = 2：获取奇偶（2n = 偶数 2n-1等于奇数） */
/* 语法糖：even=偶数 odd=奇数 last=最后一个   属性名 + of-type=选中一个                                                                                  */
/* .list > li.first {
  background-color: bisque;
} */
/* 当前是获取的第一个子元素 后代选择器写法 */
/* .list > li:nth-of-type(1) {
  background-color: blue;
} */
/* 当前是获取第一个子元素，伪类选择器的写法 */
/* 伪类选择器 nth-of-type */
/* .list li:nth-of-type(4) {
  background-color: rgb(123, 62, 62);
} */
/* nth-ofo-type(an+b)
1.a:系数，[0,1,2,3,4...]
2.n:参数，[0,1,2,3,4...]
3.b：偏移量，从0开始
注意：计算出来的索引，必须是有效的，而且必须从1开始
*/
/* 选择元素有两种情况：
1.选择一个
2.选择一组 */
/* 
 匹配一个：a = 0 完整语法 : 
   a=0是选一个 
.list li:nth-of-type(0n + 1) {
  background-color: rgb(60, 27, 27);
}
/* 计算方式an+b为计算结果
匹配第
因为a=0 0*任何数都等于0 例如0n+1=0+1=1 所以可以不写 直接写b（即可）
.list li:nth-of-type(1) {
  background-color: rgb(196, 118, 118);
} */
/* 匹配一组 a = 1 */
/* b不写就从0开始递增 */
/* 1n=从0开始选中全部 */
/* .list li:nth-of-type(1n) {
  background-color: aqua; 
}*/
/* 1乘以任何不变，那么b开始递增
1. 1*n + 0 = 0
2. 1*n + 1 = 1
3. 1*n + 2 = 2
4. 1*n + 3 = 3
。。。
最终得到一个索引顺序 1,2,3,4,5,6,7,8
*/
/* 1n+0 :从0开始匹配， 1n = 1n+0
 1n+3：从第3个开始匹配
 1n+6：从第6个开始匹配 */
/* .list li:nth-of-type(1n + 5) {
  background-color: rgb(82, 115, 10);
}
/* a = -1：反向匹配  */
/* .list li:nth-of-type(-n + 2) {
  background-color: rgb(227, 29, 197);
} */
/* :nth-last-of-type(1n+1)从倒数第一个开始选中 last倒序 */
/* .list li:nth-last-of-type(1n + 3) {
  background-color: rgb(125, 91, 91);
} */
/* 2n-1选中奇数  */
/* .list li:nth-of-type(2n-1) {
  background-color: rgb(129, 37, 37);
} */
/* 2n-2选中偶数 */
/* .list li:nth-of-type(2n-2) {
  background-color: rgb(129, 37, 37);
} */

状态伪类

<!DOCTYPE html>
<html lang="en">
  <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>伪类选择器：状态伪类</title>
  </head>
  <body>
    <form action="reds.php">
      <!-- 表单分组 -->
      <fieldset>
        <legend>用户注册</legend>
        <label for="uname">用户名</label>
        <input
          type="text"
          id="uname"
          placeholder="用户名不能为空"
          name="username"
        />
        <br />
        <!-- 提示 -->
        <label for="tips" aria-disabled="false">警告:</label>
        <input
          type="text"
          id="tips"
          value="注册后禁止注销"
          disabled
          style="border: none"
        />
        <div class="gender">
          <label for="m">性别</label>
          <input type="radio" name="sex" id="m" value="0" checked />
          <label for="m">男</label>
          <input type="radio" name="sex" id="f" value="1" />
          <label for="f">女</label>
          <br />
          <button>提交</button>
        </div>
      </fieldset>
    </form>
    <style>
      /* 获取被禁用的元素 */
      input:disabled {
        color: blue;
      }
      /* 获取到被默认选中的单选按钮 */
      input:checked + label {
        color: blue;
      }
      /* 获取焦点的变化 */
      button:hover {
        cursor: pointer;
        background-color: rgb(102, 102, 131);
      }
    </style>
  </body>
</html>

盒模型

<title>盒模型、框模型</title>
  </head>
  <body>
    <div class="box">
      <!-- margin:外边距 border：边框 padding:内边框 conetnt:内容区 -->
    </div>
    <style>
      .box {
        height: 200px;
        width: 200px;
        border: 2px solid;
        /* padding:内边框 是内容区与边框之间的填充区域 */
        /* margin:外边距，控制当前盒子与其他元素之间的空隙 */
        /* 不可见属性：margin , padding s只能设置宽度，不能设置样式*/
        /* box-sizing: border-box;推荐的盒子计算方式，可以简化页面布局 
        box-sizing: contetnt-box 还原到w3c默认标准的计算方式*/
        /* init.css文件一般为样式初始化; */
        /* .box {
                   宽度 样式 前景色
        border-top: 5px dashed blue;
        border-left: 5px dashed blue;
        border-right: 5px dashed blue;
        border-bottom: 5px dashed darkblue;
      } */
        /* padding与border一样 可简化书写简化方案：顺时针方向 
        1.四值：顺时针，上 右 下 左 
        padding: 5px 10px 15px 20px;
        2.三值 双值：第2个永远表示左右
        padding:5px 10px 15px
        3.双值： 第一个上下，第2个左右 
        padding：5px 10*/
      }

盒子模型

结构伪类与状态伪类 ,实例演示盒模型常用属性,

结构伪类选择器

状态伪类

盒模型