欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如果單選按鈕被選中，如何隱藏元素？

CSS
洪振霞1年前9瀏覽0評論

假設我有單選按鈕和一個Div。

<input id="one" type="radio" value="1">
<label>One</label> 
<input id="two" type="radio" value="2">
<label>Two</label> 

<div id="mainDiv">
<p>Hello</p>
</div>

如何僅在單選按鈕一被選中時隱藏div塊？ 不使用任何其他語言，只使用css。

我試著用了+和~。我不知道我是否用錯了，但它不起作用。

您可以將單選按鈕的checked屬性與~ combinator一起使用:

#one:checked ~ #mainDiv {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <style>
    #one:checked ~ #mainDiv {
      display: none;
    }
  </style>
</head>
<body>
  <input id="one" type="radio" name="myRadioGroup" value="1">
  <label for="one">One</label>
  <input id="two" type="radio" name="myRadioGroup" value="2">
  <label for="two">Two</label>

  <div id="mainDiv">
    <p>Hello</p>
  </div>
</body>
</html>