{display：none}不能使用复选框吗？

Question

当选中“与收货地址相同”时，该部分下面的表格应该消失了。 我放了{display：none}，但是不起作用。 当我摆脱{div class =“ checkboxalign}但它在中心不再对齐时，它起作用了，我想知道如何使该功能起作用，但仍保持其中心对齐吗？谢谢。

 .checkbox-custom, .radio-custom { margin: 0 auto; width: 40%; opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .checkbox-custom-label, .radio-custom-label { position: relative; } .checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before { content: ''; background: #fff; border: 1px solid #717171; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 2px; margin-right: 10px; text-align: center; } .checkbox-custom:checked + .checkbox-custom-label:before { content: "\\f00c"; font-family: 'FontAwesome'; font-size: 20px; color: #a1cdad; } .radio-custom + .radio-custom-label:before { border-radius: 50%; } .radio-custom:checked + .radio-custom-label:before { content: "\\f00c"; font-family: 'FontAwesome'; font-size: 20px; color: #a1cdad; } .checkbox-custom:checked ~.input-box { display: none; } .checkboxalign { margin: 0 auto; width: auto; text-align: left; display: table; margin-bottom: 10px; } .radioalign { margin: 0 auto; width: auto; text-align: left; display: table; } 

 <form class="form2"> <div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div> <div class="checkboxalign"> <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked> <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label> </div> <div class="input-box"> <input type="text" id="first-name" placeholder="John" data-type="name"/> <label for="first-name"><p>First Name</p></label> </div> <div class="input-box"> <input type="text" id="last-name" placeholder="Smith" data-type="name"/> <label for="last-name"><p>Last Name</p></label> </div> <div class="input-box"> <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/> <label for="phone-number"><p>Phone Number</p></label> </div> <div class="input-box"> <input type="text" id="company" placeholder="Company" data-type="name"/> <label for="company"><p>Company Name</p></label> </div> <div class="input-box"> <input type="text" id="address" placeholder="123 Main Street" data-type="text"/> <label for="address" data-type="name"><p>Address</p></label> </div> <div class="input-box"> <input type="text" id="city" placeholder="Everytown" data-type="text"/> <label for="city" data-type="name"><p>City</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>Texas</p></option> <option><p>Louisiana</p></option> <option><p>New Mexico</p></option> <option><p>Oklahoma</p></option> </select> <label for="card-type"><p>State</p></label> </div> <div class="input-box"> <input type="text" id="zip" placeholder="12345" data-type="text"/> <label for="zip" data-type="text"><p>Address</p></label> </div> <div class="input-box"> <select id="card-type"> <option><p>United States</p></option> </select> <label for="card-type"><p>Country</p></label> </div> <div class="input-box"> <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/> <label for="email"><p>Email Address</p></label> </div> </form> <form class="form3"> <div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div> <div class="radioalign"> <div> <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked> <label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label> </div> <div> <input id="radio-2" class="radio-custom"name="radio-group" type="radio"> <label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label> </div> <div> <input id="radio-3" class="radio-custom" name="radio-group" type="radio"> <label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label> </div> </div> </form> 

Answer 1

因为.input-box元素不是复选框的同级。 而你的选择器是

.checkbox-custom:checked ~.input-box {
  display: none;
}

Answer 2

必须有包装器div才能形成要隐藏的元素，然后CSS才能工作。