h5新增属性

04

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

H5新增的表单属性

  <form action="">
        
        
        
        
        <input type="text" name="uname" required placeholder="请输入账号" autofocus autocomplete="off">
        <input type="text"  value="请输入账号" >
        
        
        <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个lili>
      <li class="list2">我是第2个lili>
      <li class="li6">我是第3个lili>
      <li class="abcd6">我是第4个lili>
      <li id="">我是第5个lili>
      <li class="list6">我是第6个lili>
      <li class="bxy5">我是第7个lili>
      <li id="">我是第8个lili>
      <li style="">我是第9个lili>
      <li style="">我是第10个lili>
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; 
  }
  

过渡

模糊

/* 模糊距离  值越大越模糊 */
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>

<div class="fa">
	<div class="son">div>
div>