亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

1.:nth-child()

<ul class="demo" style="border: 1;">
     <li class="itme">紅色</li>
     <li class="itme">藍色</li>
     <li class="itme">綠色</li>
     <li class="itme">粉色</li>
     <li class="itme">中國
          <ul>
             <li class="itme">北京</li>
             <li class="itme">上海</li>
             <li class="itme">河南</li>
             <li class="itme">廣州</li>
          </ul>
         </li>
     <li class="itme">美國</li>
     <li class="itme">韓國</li>
 </ul>
 - 獲取第1個元素
   .demo>.itme:nth-child(1){
     background-color: hsl(327, 83%, 48%);
  }
  - 獲取第5個元素
   .demo>.itme:nth-child(5){
     background-color: hsl(327, 83%, 48%);
  }
  - 獲取最后一個元素
.demo>.itme:nth-child(7){
     background-color: hsl(327, 83%, 48%);
  }
  -獲取前三個元素
 .demo>.itme:nth-child(-n+3){
     background-color: hsl(327, 83%, 48%);
  }
  - 獲取最后3個
  .demo>.itme:nth-last-child(-n+3){
     background-color: hsl(243, 94%, 44%);
 }
 - 取偶數(shù)
 .demo>.itme:nth-child(even){
     background-color: hsl(314, 82%, 46%);
 }
 - 取奇數(shù)
 .demo>.itme:nth-child(odd){
     background-color: hsl(0, 93%, 50%);
 }

1. 獲取任意位置的元素
   
   
   
   
   
   
   
   2.:first-child

   - 獲取第一個元素
     .demo>.itme:first-child{
     background-color: hsl(327, 83%, 48%);
                                       }

   
   3.last-child
   • 獲取最后一個元素
     .demo>.itme:last-child{
     background-color: hsl(241, 94%, 37%);

                                    }

     
     4.nth-last-child()
     1.2 狀態(tài)偽類
     1.:hover(鼠標(biāo)懸停)

     <form action="">
     <fieldset class="login">
     <legend class="title">用戶登錄</legend>
     <label for="uname">呢稱:</label>
     <input type="text" name="uname" autofocus required />
     <label for="email">郵箱:</label>
     <input type="email" name="email" required />
     <label for="tel">電話:</label>
     <input type="tel" name="tel" />
     <div class="remember">
     <input type="checkbox" name="remember" id="rem" />
     <label for="rem">記住我</label>
     </div>
     <button class="submit">提交</button>
     </fieldset>
     </form>
     - css 樣式
     .login > .submit:hover {
     cursor: pointer;
     background-color: seagreen;
     color: white;
     }

     2.:enabled(有效控件)
     3.:disabled(禁用控件)
     4.:checked(選中控件)
     5.:required(必選控件)
     6.:focus(焦點控件)
     7.:not(過濾某些元素)
     8.:empty(空)

1.盒子是頁面中可見的“矩形”

1.width:寬
2.height:高
3.padding:內(nèi)邊距
      3.1：不可見屬性
      3.2：僅可設(shè)置`width`
      3.3:大多數(shù)內(nèi)置元素都有默認`padding/margin`
      3.4:建議全部重置為0，方便自定義布局
4.border:邊框
     4.1：可見屬性
     4.2：可以設(shè)置`width`/`height`/`color`
5.margin:外邊距
 5.1：不可見屬性
 5.2：僅可設(shè)置`width`
 5.3:大多數(shù)內(nèi)置元素都有默認`padding/margin`
 5.4:建議全部重置為0，方便自定義布局

1.box-sizing:設(shè)計盒模型計算邊界
2.content-box:默認值，僅包括內(nèi)容區(qū)
3.border-box:推薦值，寬高擴展到可視邊框

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