我正在试着根据select个元素中的 Select 来设计我的盒子BG colored颜色 . 挑战是在这里使用:Has()伪类. 我现在已经判断了这行代码几次，它与选项中 Select 的内容不一致…… 我到底做错了什么？
Here is an image of what I'm working on个
Html代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="testing.css">
</head>
<body>
<div class="selections">
<select name="" id="" class="options">
<option value="green">Green colour</option>
<option value="red">Red colour</option>
<option value="blue">Blue colour</option>
<option value="yellow">Yellow colour</option>
</select>
</div>
<div class="parentBox">
<div class="box">box</div>
</div>
</body>
</html>
Css代码片段
.selections {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
}
.options {
width: 30%;
height: 30%;
}
.parentBox {
display: flex;
align-items: center;
justify-content: center;
height: 40vh;
}
.box {
box-shadow: 8px 8px 32px;
width: 50%;
height: 50%;
}
.selections:has(select > option[value="green"])+.parentBox>.box{
background-color: limegreen;
box-shadow: -8px -8px 16px darkgreen;
}
.selections:has(select > option[value="red"])+.parentBox>.box{
background-color: firebrick;
box-shadow: -8px -8px 16px red;
}