css基础知识-伪类选择器

伪类选择器(非常重要)

分组结构伪类(重点学习)	使用说明	状态伪类	使用说明
选择任意 1 个	.list>li:nth-of-type(1){}	表单伪类 input:enabled 或 disabled	enabled 是允许的，disabled 是禁用的
选择倒数第 4 个	.list>li:nth-last-of-type(4){}	单选伪类 input:checked + lable	选择选中后更改 lable 文本的状态
选择第一个	.list :first-of-type{}	按钮伪类: button:hove	当鼠标悬停时更改样式
选择最后一个	.list :last-of-type{}	获取焦点:input:focus	当光标放置文本框时改变样式

伪类使用演示

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
</ul>
<style>
  /* 选中第一个li元素并把颜色 */
  ul > li:frist-of-type {
    color: yellow;
  }
  /* 选中最后一个li元素 */
  ul > li:last-of-type {
    color: yellow;
  }
  /* 选中倒数第几个（）中填要选中的参数,如倒数第5个就填5 */
  ul > li:nth-last-of-type(5) {
    color: yellow;
  }
  /* 选中任意一个或一组元素（）中填入要选中的参数 */
  /* 1 a是系数从0开始（0 1 2 3 ...）
       2 n是从0开始(0 1 2 3 ....)
       3 b是偏移量，从0开始(0 1 2 3...)
       注：三个值计算出来的索引必须是有效，从1开始
     */
  ul > li:nth-of-type(an + b) {
    color: yellow;
  }
  /* 取从第三个li开始的全部li元素 */
  ul > li:nth-of-type(n + 3) {
    color: red;
    /* n+3 匹配过程
     其中3是偏移量从第3个开始
     1 n=0;0+3=3 匹配第3个
     2 n=1;1+3=4 匹配第4个
     3 n=2;2+3=5 匹配第5个
     4 n=3;3+3=6 匹配第6个
     5 n=4;4+3=7 匹配第7个
     6 n=5;5+3=8 匹配第8个
     7 n=6;6+3=9 第9个,元素超界无法匹配
     最后n+3匹配到的是3 4 5 6 7 8共6个
     */
  }
  /* a=-1时，功能与a=1是一样的，只是反向取 */
  /* 如要取前三个,就用-n+3的参数即可 */
  ul > li:nth-of-type(-n + 3) {
    color: red;
    /* -n+3匹配过程
     1 -0+3=3  匹配第3个
     2 -1+3=2  匹配第2个
     3 -2+3=1  匹配第1个
     4 -3+3=0  匹配不到
     最后-n+3匹配到前三个li元素
    */
  }
  /* 如果要取后三个，就用nth-last-of-type(-n+b) */
  ul > li:nth-last-of-type(-n + 3) {
    color: red;
    /* nth-last-of-type是选择最后几个的意思 
    最后-n+3匹配过程
    1 -0+3=3 匹配最后第3个
    2 -1+3=2 匹配最后第2个
    3 -2+3=1 匹配最后第1个
    4 -3+3=0 匹配不到结束匹配
    -n+3=>(3 2 1 )  
    */
  }
  /* 如果要取偶数的元素就用2n */
  ul > li:nth-of-type(2n) {
    color: red;
    /* 2n+2匹配过程
    1 2*0=0 第0个无元素匹配不到
    2 2*1=2 匹配到第2个
    3 2*2=4 匹配到第4个
    3 2*3=6 匹配到第6个
    4 2*4=8 匹配到第8个
    最后2n+2=>(2 4 6 8)  4个偶数元素
    语法堂2n=even ,2n+1=odd
    nth-of-type(even)表示取偶数行
    */
  }
  /* 如果要取奇数元素就用2n+1 */
  ul > li:nth-of-type(2n + 1) {
    color: red;
    /* 2n+2匹配过程
    1 2*0=0 0+1=1  匹配到第1个
    2 2*1=2 2+1=3  匹配到第3个
    3 2*2=4 4+1=5  匹配到第5个
    3 2*3=6 6+1=7  匹配到第7个
    4 2*4=8 8+1=9 匹配不到结束
    最后2n+2=>(1 3 5 7)  4个偶数元素
    */
  }
</style>

表单伪类

<label for="username">用户名：</label>
<input type="text" id="username" value="" placeholder="请输入用户名/邮箱" />
<label for="password">密码：</label>
<input type="password" id="password" value="" disabled />
<label for="girl">性别:</label>
<input type="radio" name="sex" id="man" value="1" />
<label for="man">男</label>
<input type="radio" name="sex" id="girl" value="" checked />
<label for="girl">女</label>
<div><button>提交</button></div>
<style>
  /* 找到允许状态（enabled）的文本框并修改其背景色 */
  input:enabled {
    background-color: cornsilk;
  }
  /* 找到禁用状态(disabled)的文本框并修改背景色 */
  input:disabled {
    background-color: darkseagreen;
  }
  /* 当选中时将lable文本的样式改变 */
  input:checked + label {
    color: red;
  }
  /* 更改提交按钮的样式 */
  button {
    /* 边框线删除 */
    border: none;
    /* 轮廓线删除 */
    outline: none;
    width: 6rem;
    height: 1.8rem;
    background-color: lawngreen;
    color: rgb(255, 255, 255);
    margin: 1rem;
  }
  button:hover {
    background-color: tomato;
    /* 将鼠标变为小手 */
    cursor: pointer;
  }
  /* 获取焦点时更改背景色 */
  input:focus {
    background-color: violet;
  }
</style>

引入字体图标的详细方法

• 第一步打开阿里图标库网站(https://www.iconfont.cn/)
• 第二步选中喜欢的图标加入购物车并下载到本地电脑上
• 第三步解压图标拖到项目中
• 第四步引入图标样式 css（<link rel="stylesheet" href="./font_icon/iconfont.css">）
• 第五步在标签中引入图标 class(class="iconfont icon-xxx")
• 第六步可修改引入图标字体的样式，按文本方式设置图标即可

盒模型常用的 5 个属性

• 1. width： 宽度
• 1. height： 高度
• 1. margin： 外边距
• 1. padding: 内边距
• 1. border: 边框

<div class="box"></div>
<style>
  /* 没加box-sizing: border-box;时盒子计算方式
      高/宽度计算:20*16+border(10*2)+padding(5*2)=350px
      */
  .box {
    width: 20rem;
    height: 20rem;
    background-color: tomato;
    border: 10px dashed black;
    background-clip: content-box;
    padding: 5px;
    /* 加上box-sizing: border-box;后盒子的高度和宽度和设置的一样，不会影响到布局 */
    box-sizing: border-box;
  }
</style>

加或不加 box-sizing:border-box 对比图

em 和 rem 的区别

• 1. em 永远继承当前或者父级 font-size
• 1. rem 永远继承的是 html 的 font-size

<div class="box"></div>
<style>
  .box {
    /* 当前或父级没有使用font-size时使用em计算结果不受影响 */
    /* 如果在当前或父级增加font-size设置的宽度和高度就会受影响 */
    width: 10em;
    height: 10em;
    /* 
    计算结果:html的默认font-size=16px*10em=160px，
    当前设置宽和高都是160px
     */
  }
  .box {
    font-size: 30px;
    width: 10em;
    height: 10em;
    /* 计算结果:由于em继承了当前的font-size=30px*10em=300px */
    /* 所以当前设置的宽和高都是300px */
  }
  .box {
    font-size: 30px;
    width: 10rem;
    height: 10rem;
    /* 计算结果:由于rem永远继承的都是html的font-size
    所以默认html的font-size=16px*10rem=160px
    当前设置的宽和高都是160px
    */
  }
</style>