css選擇器 + 的使用

時間 2019-12-04

標籤 css 選擇器使用欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            margin: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .inbox{
            margin: 50px auto;
            width: 400px;
            border: 1px solid gainsboro;
            border-radius: 5px;
            box-shadow: 5px 5px 5px gainsboro;
        }
        .inbox .item{
            text-align: center;
            border-bottom: 1px solid gainsboro;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inbox .item input{
            height: 15px;
            flex: 1;
            outline-style: none;
        }
        .inbox p {
            box-sizing: border-box;
            border-left: 1px solid gainsboro;
            flex: 5;
            text-align: left;
            padding-left: 10px;
            padding-top:10px;
            padding-bottom: 10px;
            word-break: break-all;
        }
        .inbox .item:last-child{
            border-radius: 5px;
        }
        .inbox .item:nth-child(odd){
            border-color: ghostwhite;
        }
        .inbox .item input:checked + p{
           background-color: gainsboro;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
  <div class="inbox">
      <div class="item">
          <input type="checkbox">
          <p>we are not a animals</p>
      </div>
      <div class="item">
          <input type="checkbox">
          <p>we are not a animals ksljdflkajsdfkjsdfsdfsalkdjfklajldfjkljsdfadfsdfadfsaaaaaaaaaffffffffffffff</p>
      </div>
      <div class="item">
          <input type="checkbox">
          <p>we are not a animals</p>
      </div>
      <div class="item">
          <input type="checkbox">
          <p>we are not a animals</p>
      </div>
      <div class="item">
          <input type="checkbox">
          <p>we are not a animals</p>
      </div>
  </div>
</body>
<script type="application/javascript">
    const checkboxs = document.querySelectorAll('.inbox input[type="checkbox"]');
    let lastChecked;
    function handler(e){
        let isBetween = false;
        let self = this;
        if(e.shiftKey &&  this.checked){
            checkboxs.forEach(function(checkbox){
                if(checkbox ===self || checkbox ===lastChecked){//兩次進入
                    console.log(checkbox);
                   isBetween = !isBetween;
                }
                if(isBetween){
                    checkbox.checked = true;
                }
            });
        }
        lastChecked = this;
    };
    checkboxs.forEach(function(checkbox){
        checkbox.addEventListener('click',handler,false)
    });
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。