Question

这是我的代码

由于某种原因，我无法将[type = radio]：checked的单选框定位为目标

因此，当我单击单选按钮时，我无法切换样式

如果我删除输入周围的div，但我需要在其周围添加更多的div，它将起作用。

任何帮助将不胜感激

<html>
    <head>
        <style>
            .regular {
                color:pink;
            }
#toggle-2[type=radio]:checked ~ .right-column .inner1 li.regular
{
   background: gray;
    color:white;
}
#toggle-1[type=radio]:checked ~ .right-column .inner1 li.premier
{
   background: red;
   color: lightgray;
}
            </style>
    </head>
    <body>
        <div id="wrap">
            <div>
    <input type="radio" id="toggle-1" name="radio">
<input type="radio" id="toggle-2" name="radio">
            </div>
<div>I'm controlled by toggle. No JavaScript!</div>
                    <div class="right-column">
                        <div class="inner1">
                            <div class="pink">this is a test</div>
                            <ul>
                              <li class="regular_m">a</li>
                              <li class="regular">b</li>
                              <li class="regular">c</li>
                              <li class="regular">d</li>
                              <li class="regular">e</li>
                              <li class="regular">f</li>
                              <li class="regular">g</li>
                              <li class="regular">h</li>
                              <li class="regular">i</li>
                              <li class="regular">j</li>
                              <li class="regular">k</li>
                              <li class="regular">l</li>
                              <li class="regular">m</li>
                              <li class="regular">n</li>
                              <li class="regular">o</li>
                              <li class="regular">p</li>
                              <li class="regular">q</li>
                              <li class="premier">r</li>
                              <li class="premier">s</li>
                              <li class="premier">t</li>
                              <li class="premier">u</li>
                              <li class="premier">v</li>
                              <li class="premier">w</li>
                              <li>x</li>
                              <li>y</li>
                              <li>z</li>
                            </ul>
                        </div>    
                    </div>

<div class="pink">I'm controlled by toggle. No JavaScript!</div>
<div class="black">I'm controlled by toggle. No JavaScript!</div>
        </div>

    </body>
</html>

Answer 1

您无法从.right-column中选择input，因为它们不在同一DOM级别上，也不在子节点上。我只是移动复选框并删除选择器的.right-column部分：

<html>
  <head>
    <style>
      .regular {
        color: pink;
      }
      #toggle-2[type='radio']:checked ~ .inner1 li.regular {
        background: gray;
        color: white;
      }
      #toggle-1[type='radio']:checked ~ .inner1 li.premier {
        background: red;
        color: lightgray;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div>I'm controlled by toggle. No JavaScript!</div>
      <div class="right-column">
        <input type="radio" id="toggle-1" name="radio" />
        <input type="radio" id="toggle-2" name="radio" />
        <div class="inner1">
          <div class="pink">this is a test</div>
          <ul>
            <li class="regular_m">a</li>
            <li class="regular">b</li>
            <li class="regular">c</li>
            <li class="regular">d</li>
            <li class="regular">e</li>
            <li class="regular">f</li>
            <li class="regular">g</li>
            <li class="regular">h</li>
            <li class="regular">i</li>
            <li class="regular">j</li>
            <li class="regular">k</li>
            <li class="regular">l</li>
            <li class="regular">m</li>
            <li class="regular">n</li>
            <li class="regular">o</li>
            <li class="regular">p</li>
            <li class="regular">q</li>
            <li class="premier">r</li>
            <li class="premier">s</li>
            <li class="premier">t</li>
            <li class="premier">u</li>
            <li class="premier">v</li>
            <li class="premier">w</li>
            <li>x</li>
            <li>y</li>
            <li>z</li>
          </ul>
        </div>
      </div>

      <div class="pink">I'm controlled by toggle. No JavaScript!</div>
      <div class="black">I'm controlled by toggle. No JavaScript!</div>
    </div>
  </body>
</html>

无法通过css

1 个答案: