HTML-带有单选按钮的图像的CSS

我想有一个单选按钮下的图像。每当选择单选按钮时，图像应进入一个帧中

我实现了这种行为，但单选按钮必须位于图像上方，我希望它位于图像下方

        /* IMAGE STYLES */
        [type=radio] + img {
            cursor: pointer;
        }

        /* CHECKED STYLES */
        [type=radio]:checked + img {
            outline: 2px solid #f00;
        }

//在这里，图像没有得到帧

---

你知道哪个CSS与表的第二个单元格匹配吗？

你可以使用jquery，但是如果你想使用纯CSS，你可以这样做：

 [type=radio]:checked ~ .[CLASS_OF_THE_IMAGE] {
outline: 2px solid #f00;
}

---

如何使用CSS更改显示顺序，例如使用Flexbox'

flex direction

？尝试。如果在类似的元素组中保持适当的匹配顺序，您可能会发现您没有这些令人惊讶的问题。

 [type=radio]:checked ~ .[CLASS_OF_THE_IMAGE] {
outline: 2px solid #f00;
}