Question

我正在尝试修复其他开发人员在此网站上所做的事情：http://alamodecreamery.com/products-page/accessories/girls-atom/

如果将鼠标悬停在尺寸上，则会出现一个华夫饼图标，但是当选中该项目时（单选按钮），背景将消失。我需要一个标签：选中背景以显示华夫饼干。我在wpsc-default.css的第1150行找到了CSS选择器，并添加了一个标签：active for testing，工作正常（aqua on active）。

任何人都可以找出为什么：选中的背景不起作用？香港专业教育学院尝试了一些不同的东西：

label + input[type="radio"]:checked { 
    background:pink !important;
}

input[type="radio"]:checked { 
    background:pink !important;
}

.wpsc_variation_forms label:checked {background-color: green !important;}

提前致谢！

Answer 1

你的尝试无法奏效。您有一个结构，其中收音机input包含在label内。 label的大小与华夫饼相匹配，并在悬停时更改其背景。选中单选按钮后，input会获得:checked状态，而不是label！现在，在CSS中，遗憾的是select an element based on a descendant's state是不可能的。因此，使用纯CSS无法根据其中一个包含元素的伪类更改label的外观。

我建议添加一些Javascript，当切换单选按钮时，在label上切换一个类，这将是最简单的修复。

Techy旁注：过去有一些针对“父选择器”的提案，并且所有提案都被浏览器开发人员击落，因为从性能角度来看，由于DOM和CSS匹配的方式不可行。如今引擎非常有效，讨论重新开始，但仍处于初步阶段。在CSS4表面之前不要指望任何东西。

Answer 2

标签：选中无效。选中仅用于输入。

像

这样的东西

wpsc_variation_forms label + input:checked

可能效果更好

尝试在标签上修复背景图像：选中

2 个答案: