項目中遇到的問題筆記

css部分：

讓input中的數字和文本對齊   vertical-align: text-top;

讓圖片和文本對齊 vertical-align:middle;

讓a轉爲行內塊元素display-inlineblock；

css兩個選擇器：nth-child(n+3)從第3個開始到最後。

nth-child(-n+3)標籤從0到3，即小於3的標籤。

————————————————————————

重置input按鈕的樣式：（找了很多都很麻煩，這個實踐有效）：

           1：將默認樣式透明隱藏；

            input{
display:none;
opacity:0;
}

          2：插入一張未選中的樣式圖片
   input[type=checkbox]+label::before {
       display: inline-block;
       width: 36px;
       height: 36px;
       content: '';
       background: url('../images/nocheck.png') no-repeat center;
       background-size: 36px 36px;
   }

          3：插入一張被選中後的樣式圖片
  input[type=checkbox]:checked+label::before{
       background: url('../images/checked.png') no-repeat center;
       background-size: 36px 36px;
   }

ps（以上圖片用content字體圖標插入也可以的）。 

js部分：

// input全選全不選
$('#checkedAll').on('change',function (e) {
  e.preventDefault();
  if ($('#checkedAll').is(":checked")){
    $('input[type=checkbox]').prop('checked',true);
  } else {
    $('input[type=checkbox]').prop('checked',false);
  }
});