问无法通过css选择[类型:单选]
EN

Stack Overflow用户

提问于 2018-11-29 03:08:19

回答 1查看 30关注 0票数 0

以下是我的代码

由于某些原因，我不能为[type=radio]:checked定位广播信箱。因此，我不能在单击单选按钮时切换样式。如果我删除input周围的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>

dom

css

回答 1

Stack Overflow用户

发布于 2018-11-29 03:21:25

您不能从input中选择.right-column，因为它们不在同一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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53526456

复制

相似问题

问无法通过css选择[类型:单选]
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法通过css选择[类型:单选]EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法通过css选择[类型:单选]
EN