求助：仅用HTML/CSS实现点击颜色面板切换背景色

需要制作一个可切换页面背景色的颜色面板，点击特定颜色后.shoe-background的背景色随之变化。已用:target伪类实现颜色选择器的选中效果，但背景色切换始终失败，尝试过:focus、:checked等伪类都无效，且禁止使用JavaScript。

现有HTML代码 #

<div class="shoe-background">
        <div id="niketext">NIKE</div>
    </div>
    <div class="textpanel">
        <div id="header">
            <div id="title">Nike Zoom KD 12</div>
            <div class="button">NEW</div>
            <div style="font-size:15px;font-weight:300;">Men's Running Shoes</div>
            <br>
            <div style="font-size:20px;font-weight:500">Product Info</div>
            <div style="font-size:13px;font-weight:300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis distinctio odit praesentium tempora commodi ea iusto veniam fuga minima, tenetur sequi voluptatibus voluptas id! Minima perferendis voluptatibus sint molestias quisquam!</div>
            <br>
            <div style="font-size:20px;font-weight:500">Color</div>
            <div class="colors-selector">
                <a href="#red" class="picker" id="red"></a>     //I am using :target  for color select effect
                <a href="#green" class="picker" id="green"></a>
                <a href="#blue" class="picker" id="blue"></a>
                <a href="#orange" class="picker" id="orange"></a>
                <a href="#gray" class="picker" id="gray"></a>
            </div>
        </div>
    </div>

尝试过的无效CSS代码 #

.colors-selector a#red:focus .shoe-background{
      background: red;
}

.colors-selector a#red:focus ~.shoe-background{
      background: red;
}

.picker ~.shoe-background{
      background: red;
}

#red:target .shoe-background{
    background:red;
}
//and so on...

问题根源 #

CSS选择器只能选取当前元素的子元素或后续同级兄弟元素，无法选取前置的同级元素或父元素的兄弟元素。你的结构中.shoe-background在颜色选择器的父元素之前，所以从a标签出发，任何选择器都无法直接选中它。

解决方案（纯CSS） #

通过调整HTML结构，结合:target和兄弟选择器来实现需求，具体如下：

修改后的HTML代码 #

<!-- 新增隐藏的锚点元素，放在最前面作为同级兄弟 -->
<div id="red-anchor" class="color-anchor"></div>
<div id="green-anchor" class="color-anchor"></div>
<div id="blue-anchor" class="color-anchor"></div>
<div id="orange-anchor" class="color-anchor"></div>
<div id="gray-anchor" class="color-anchor"></div>

<div class="shoe-background">
    <div id="niketext">NIKE</div>
</div>
<div class="textpanel">
    <div id="header">
        <div id="title">Nike Zoom KD 12</div>
        <div class="button">NEW</div>
        <div style="font-size:15px;font-weight:300;">Men's Running Shoes</div>
        <br>
        <div style="font-size:20px;font-weight:500">Product Info</div>
        <div style="font-size:13px;font-weight:300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis distinctio odit praesentium tempora commodi ea iusto veniam fuga minima, tenetur sequi voluptatibus voluptas id! Minima perferendis voluptatibus sint molestias quisquam!</div>
        <br>
        <div style="font-size:20px;font-weight:500">Color</div>
        <div class="colors-selector">
            <!-- 修改href指向对应的锚点 -->
            <a href="#red-anchor" class="picker" data-color="red"></a>
            <a href="#green-anchor" class="picker" data-color="green"></a>
            <a href="#blue-anchor" class="picker" data-color="blue"></a>
            <a href="#orange-anchor" class="picker" data-color="orange"></a>
            <a href="#gray-anchor" class="picker" data-color="gray"></a>
        </div>
    </div>
</div>

对应的CSS代码 #

/* 默认样式：给背景区域设置基础样式 */
.shoe-background {
    background: #fff;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    transition: background 0.3s;
}

/* 颜色选择器样式 */
.colors-selector {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.picker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: block;
    cursor: pointer;
    transition: border-color 0.3s;
}
/* 给每个选择器设置对应颜色 */
.picker[data-color="red"] { background: red; }
.picker[data-color="green"] { background: green; }
.picker[data-color="blue"] { background: blue; }
.picker[data-color="orange"] { background: orange; }
.picker[data-color="gray"] { background: gray; }

/* 隐藏锚点元素 */
.color-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 1. 背景色切换逻辑：利用锚点的:target状态选中后续的.shoe-background */
#red-anchor:target ~ .shoe-background {
    background: red;
}
#green-anchor:target ~ .shoe-background {
    background: green;
}
#blue-anchor:target ~ .shoe-background {
    background: blue;
}
#orange-anchor:target ~ .shoe-background {
    background: orange;
}
#gray-anchor:target ~ .shoe-background {
    background: gray;
}

/* 2. 颜色选择器的选中效果：锚点target时，对应选择器加边框 */
#red-anchor:target ~ .textpanel .picker[data-color="red"],
#green-anchor:target ~ .textpanel .picker[data-color="green"],
#blue-anchor:target ~ .textpanel .picker[data-color="blue"],
#orange-anchor:target ~ .textpanel .picker[data-color="orange"],
#gray-anchor:target ~ .textpanel .picker[data-color="gray"] {
    border-color: #000;
}

原理说明 #

1. 新增的.color-anchor是隐藏的锚点元素，放在所有内容最前面。当点击颜色选择器的a标签时，对应的锚点会被:target伪类选中。
2. 利用CSS兄弟选择器~，可以从被:target的锚点元素，选中后续的.shoe-background（背景区域）和.textpanel（颜色选择器所在区域），从而实现背景色切换和选中状态的高亮。

内容的提问来源于stack exchange，提问作者wallshock