04

1. 新增表单属性
2. 结构伪类选择器
3. 伪元素选择器
4. 过渡

H5新增的表单属性

  <form action=""><!-- required 表单添加了该属性,表示当前表单项是必填的 --><!-- placeholder 提示文本占位 --><!-- autofocus自动获取焦点 --><!-- autocomplete 自动补全功能 前提1 必须要name属性  前提2 必须成功提交过一次--><input type="text" name="uname" required placeholder="请输入账号" autofocus autocomplete="off"><input type="text"  value="请输入账号" ><!-- mutiple 实现多选 --><!-- email 也可以说使用该属性, 多个邮箱在使用的时候使用逗号隔开的 --><input type="file" multiple><input type="email" multiple><input type="submit"></form>

属性选择器

• 属性选择器的权重是10

 <style>/* 找出拥有id属性的li */li[id] {color: pink;}/* 找出class等于list6的li */li[class="list6"] {color: red;}/* 找出class是以l开头的li标签 ^= */li[class^="l"] {background-color: green;}/* 找出class是以6结尾的li标签 $= 如果匹配的字符是纯数字 数字一定记得加引号 */li[class$="t6"] {font-size: 30px;}/* 找出class包含b的li标签  *=  */li[class*="li"] {text-align: center;}/* 属性选择器的权重是10  */li.list6 {color: blue;}
</style>
<ul><li id="" class="list1" style="">我是第1个li</li><li class="list2">我是第2个li</li><li class="li6">我是第3个li</li><li class="abcd6">我是第4个li</li><li id="">我是第5个li</li><li class="list6">我是第6个li</li><li class="bxy5">我是第7个li</li><li id="">我是第8个li</li><li style="">我是第9个li</li><li style="">我是第10个li</li>
</ul>

结构伪类选择器

• 结构伪类选择器的权重是10

• 第一个

  /* first-child是第一个元素 */
  li:first-child {background-color: red;
  }
  

• 最后一个

  /* last-child是最后一个元素 */
  li:last-child {background-color: pink;
  }
  

• 第几个

  /* 第n个  nth-child(n) */
  li:nth-child(2){background-color: green;
  }
  

• 奇数

   /* 奇数 odd || 2n+1/2n-1 */li:nth-child(2n-1) {background-color: #000;}
  

• 偶数

   /* 偶数 even || 2n */li:nth-child(2n){background-color: #f40;}
  

• 公式

  /* ()中可以写具体的数字,可以写预定义的单词,可以写公式,如果书写的是公式,计算结果是<=0或者>总数的,都不会被选中 */
  /* 5的倍数 */
  li:nth-child(5n) {background-color: red;
  }
  /* 前10个 */
  li:nth-child(-n+10) {background-color: pink;
  }
  /* 后10个 */
  li:nth-last-child(-n+10) {background-color: blue;
  }
  

• -child和-of-type 可以进行替换的

  nth-child在筛选的时候不严格,只比较顺序,不比较标签类型,
  nth-of-type 在筛选的时候既会比较顺序,也会比较标签类型
  

伪元素选择器

<style>/* 伪元素使用在双标签之内,任何一个双标签都有两个伪元素一个before一个after */div {width: 300px;height: 300px;border: 1px solid #000;color: red;}/* 伪元素默认是行内元素,可以通过display,浮动,定位等方式转换原来的显示模式 *//* before 会插入到元素中的内容之前  after插入到元素的内容之后 */div::before {/* 必写属性content *//* display: inline-block; */float: left;content: '青龙';width: 50px;height: 50px;background-color: pink;}div::after {/* 必写属性content *//* display: inline-block; */float: right;content: '白虎';width: 50px;height: 50px;background-color: pink;}
</style>
<div>座山雕</div>

盒子模型 box-sizing:border-box

• 设置了box-sizing:border-box的盒子, padding和border不会再撑大盒子

•   * {margin: 0;padding: 0;box-sizing: border-box; 
  }
  

过渡

<style>
div {width: 100px;height: 200px;background-color: rgb(255, 0, 0);/* 谁做过渡给谁加 *//* 过渡属性 过渡执行时长 运动曲线  何时开始 *//* 多个过渡使用可以使用逗号隔开 *//* transition: width 2s linear 1s,height 2s linear 1s,background-color 2s linear 1s; *//* 如果同意设置 all 执行时长 */transition: all 1s;/* 过渡只能从一个具体的值过渡到另一个具体的值 display 不能被过渡 *//* display: block; */
}
div:hover {width: 600px;height: 400px;background-color: rgb(255, 192, 203);/* 过渡只能从一个具体的值过渡到另一个具体的值 display 不能被过渡 *//* display: none; */
}
</style>
<div></div>

模糊

/* 模糊距离  值越大越模糊 */
filter: blur(15px);

自动计算

 <style>.fa {width: 600px;height: 100px;background-color: pink;}.son {/* 在运算符左右得有空格 *//* width: calc(100% * 6); *//* width: calc(100% / 6); *//* width: calc(100% + 60px); */width: calc(100% - 60px);height: 20px;background-color: red;}
</style>
<!-- 一个父容器中有一个子容器, 需要子容器始终是小于父容器20px -->
<div class="fa"><div class="son"></div>
</div>