Estou com um problema onde o meu CSS parece não estar aceitando um tipo de seletor. No caso nenhum label[for=…] está funcionando no código. Vou deixar aqui o html e o css para que possam dar uma olhadinha. Não sei se é uma coisa nova do CSS que eu tenho que alterar, mas já rodei o google e não encontrei solução.
O HTML
<body>
<input type="radio" name="opcao" id="opcao_bolos" checked="true">
<label for="opcao_bolos">Bolos</label>
<input type="radio" name="opcao" id="opcao_bebidas">
<label for="opcao_bebidas">Bebidas</label>
<img src="imagens/menu-bolos.png" alt="Menu Bolos" id="menu-bolos" class="menu">
<img src="imagens/menu-bebidas.png" alt="Menu Bebidas" id="menu-bebidas" class="menu">
</body>
O CSS
#opcao_bolos:checked ~ #menu-bebidas,
#opcao_bebidas:checked ~ #menu-bolos {
display: none;
}
.menu {
width: 100%;
}
body {
background: #3D1A11;
margin: 0;
font-family: sans-serif;
text-align: center;
}
input[type=radio] {
display: none;
}
label {
background-color: #563429;
background-size: 4em;
background-repeat: no-repeat;
color: white;
display: block;
font-size: 75%;
padding: 4em 0 1em;
text-transform: uppercase;
}
label[for=opcao_bolos] { /*--------esse não funciona---------------*/
background-image: url(imagens/download.png);
}
label[for=opcao_bebidas] { /*--------esse não funciona---------------*/
background-image: url(imagens/download.png);
}
input[type=radio]:checked + label {
background-color: #E4876D;
}
label {
width: 50%;
position: fixed;
bottom: 0;
z-index: 1;
}
label[for=opcao_bolos] { /*--------esse não funciona---------------*/
left: 0;
}
label[for=opcao_bebidas] { /*--------esse não funciona---------------*/
right: 0;
}
A parte que não está funcionando está comentada com ‘/--------esse não funciona---------------/’.
Espero que tenha dado pra entender a dúvida. Desde já, obrigada.