通过单击单选按钮更改CSS中的几个div颜色

是否可以使用CSS来实现与以下在JavaScript中完成的示例相同的输出.我想只在CSS中执行此操作.

HTML

Black

Blue

Green

Yellow

CSS

div{
  position:absolute;
  background-color:red;
  height:150px;
  width:150px;
  margin:10px;
}
.first-div{background-color:black;}
.second-div{background-color:blue;}
.third-div{background-color:green;}
.forth-div{background-color:yellow;}

JavaScript 我想在没有JavaScript代码的情况下执行相同的功能.只是应用CSS,黑客单选按钮强制它改变点击div的颜色

function f(IncValue)
    {
        if(IncValue=="Black")
        {
            document.getElementById('black').style.visibility="visible";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";

        }
        else if(IncValue=="Blue")
        {
            document.getElementById('blue').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Green")
        {
            document.getElementById('green').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Yellow")
        {
            document.getElementById('yellow').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
        }


    }

Harry.. 5

通过将所有输入按钮移动到divDOM中的元素之前,然后使用通用兄弟选择器,我们可以div单独隐藏/显示所需的(对应于所选颜色).

在下面的代码片段中,以下是正在执行的操作:

每当点击一个input(无线电)时name="clr",所有div与兄弟姐妹相关的元素input都class='colored-div被隐藏.我已经从提供的原始片段更改了类名,只是为了确保只div隐藏这些元素.否则我们必须编写一组选择器或使用通用div选择器,这会在其他地方引起问题(也就是说,div页面中的其他内容也会被隐藏).

基于input已选择的(无线电),仅将div与所选颜色对应的设置为visibility: visible.

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
#black {
  background-color: black;
}
#blue {
  background-color: blue;
}
#green {
  background-color: green;
}
#yellow {
  background-color: yellow;
}
input[name="clr"]:checked ~ .colored-div {
  visibility: hidden;
}
input[value="Black"]:checked ~ #black {
  visibility: visible;
}
input[value="Blue"]:checked ~ #blue {
  visibility: visible;
}
input[value="Green"]:checked ~ #green {
  visibility: visible;
}
input[value="Yellow"]:checked ~ #yellow {
  visibility: visible;
}

Black
Blue
Green
Yellow

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
input[value="Black"]:checked ~ .colored-div {
  background-color: black;
}
input[value="Blue"]:checked ~ .colored-div {
  background-color: blue;
}
input[value="Green"]:checked ~ .colored-div {
  background-color: green;
}
input[value="Yellow"]:checked ~ .colored-div {
  background-color: yellow;
}

Black
Blue
Green
Yellow

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
#black {
  background-color: black;
}
#blue {
  background-color: blue;
}
#green {
  background-color: green;
}
#yellow {
  background-color: yellow;
}
input[name="clr"]:checked ~ .colored-div {
  visibility: hidden;
}
input[value="Black"]:checked ~ #black {
  visibility: visible;
}
input[value="Blue"]:checked ~ #blue {
  visibility: visible;
}
input[value="Green"]:checked ~ #green {
  visibility: visible;
}
input[value="Yellow"]:checked ~ #yellow {
  visibility: visible;
}

Black
Blue
Green
Yellow