在 CSS 中签入时将背景颜色更改为粉红色

Question

If I click the checkbox the background-color won't change to pink, what am I doing wrong here? Everytime I click the checkbox nothing happens.

 .joe:checked~.sub { background-color: pink; }.sub { position: absolute; background-color: grey; top: 70px; right: 395px; width: 185px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

 <input type="checkbox" id="hoon" class="joe"> <li><a href="#"><label for="hoon">Services</label></a></li> <div class="sub"> <li><a href="#">Take aways</a></li> <li><a href="#">Online Order</a></li> <li><a href="#">Pick and Drop</a></li></div>

Answer 1

There is no .sub class defined in your above example. If that wasn't intentional, then the issue is with your CSS selector precedence level.

Your CSS should've been:

.sub{
    position: absolute;
    background-color: grey;
    top: 70px;
    right: 395px;
    width: 185px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.joe:checked ~ .sub{
    background-color: pink;
}

The difference in above css from your one is that, .joe:checked ~.sub selector styles are written post .sub class styles. It helps CSS to override the older .sub class styles.

Details on CSS Precedence: Precedence in CSS

Solved:

Codesandbox Example