h 5新規属性

25737 ワード

04
  • フォーム属性
  • を追加
  • 構造擬似クラスセレクタ
  • 擬似要素セレクタ
  • 遷移
  • H 5新規フォーム属性
      <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>