使用CSS完成下拉框选项过滤操作

HTML片段

<div class="box">
    <div class="filters">
        <select title="choose" id="choose">
            <option value="0">please select</option>
            <option value="black">black</option>
            <option value="green">green</option>
            <option value="blue">blue</option>
        </select>
    </div>

    <div class="product-list">
        <div class="product" style="background-color: black;">
            <div class="black">black</div>
            <div class="black">black</div>
            <div class="black">black</div>
        </div>

        <br>

        <div class="product" style="background-color: green;">
            <div class="green">green</div>
            <div class="green">green</div>
            <div class="green">green</div>
        </div>

        <br>

        <div class="product" style="background-color: blue;">
            <div class="blue">blue</div>
            <div class="blue">blue</div>
            <div class="blue">blue</div>
        </div>
    </div>
</div>

CSS片段

.filters:has(option[value="black"]:checked)~.product-list .product:not(:has(> .black)) {
    display: none;
}

.filters:has(option[value="green"]:checked)~.product-list .product:not(:has(> .green)) {
    display: none;
}

.filters:has(option[value="blue"]:checked)~.product-list .product:not(:has(> .blue)) {
    display: none;
}

.product-list {
    margin-top: 120px;
    display: flex;
    gap: 20px;
    color: #fff;
}

.product-list>.product:nth-of-type(1) {
    background-color: black;
}

.product-list>.product:nth-of-type(2) {
    background-color: green;
}

.product-list>.product:nth-of-type(3) {
    background-color: blue;
}

当选择black选项时：

当选择green选项时：

当选择blue选项时：