时间戳

首页 > 解决方案 > 无法通过 css 选择 [type:radio]

css - 无法通过 css 选择 [type:radio]

问题描述

这是我的代码

出于某种原因，我无法将单选框定位为[type=radio]:checked. 因此，当我单击单选按钮时，我无法切换样式。如果我删除div周围的它会起作用，input但我需要在它周围添加更多的 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>

标签： cssdom

解决方案

您不能从中进行选择.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>

推荐阅读