设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 请教css如何选择"已选择(checked)的input[radio]的lab ...
返回列表 发新帖
查看: 2118|回复: 1

[已解决]请教css如何选择"已选择(checked)的input[radio]的label"

[复制链接]
天圆突破
发表于 2019-9-10 14:49:23 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
label和input相隔十万八千里（反正无法直接用+~等选择器选中），那么能不能根据已checked的input选到对应的label呢？（不能使用js）
示例代码如下，请问能否在不使用js的情况下给对应的label加上样式呢？
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <style>
  8.   nav {
  9.     display: flex;
  10.     height: 40px;
  11.     background-color: #333;
  12.     color: goldenrod;
  13.     align-items: center;
  14.   }

  16.   .menu {
  17.     flex: 1;
  18.     padding: 0 5% 0 20%;
  19.     display: flex;
  20.   }

  22.   .menu > label {
  23.     flex: 1;
  24.     display: block;
  25.     height: 40px;
  26.     line-height: 40px;
  27.     text-align: center;
  28.   }

  30.   ul, li {
  31.     display: block;
  32.     list-style: none;
  33.   }

  35.   .tabs {
  36.     display: none;
  37.   }

  39.   input[name=box]:checked + div {
  40.     display: block;
  41.   }

  43. </style>

  45. <main>
  46.   <nav>
  47.     <h2>title</h2>
  48.     <div class="menu">
  49.       <label for="tabs01">tabs01</label>
  50.       <label for="tabs02">tabs02</label>
  51.       <label for="tabs03">tabs03</label>
  52.       <label for="tabs04">tabs04</label>
  53.       <label for="tabs05">tabs05</label>
  54.       <label for="tabs06">tabs06</label>
  55.     </div>
  56.   </nav>
  57.   <main>
  58.     <ul>
  59.       <li><input type="radio" id="tabs01" name="box" hidden checked>
  60.         <div class="tabs">tabs1</div>
  61.       </li>
  62.       <li><input type="radio" id="tabs02" name="box" hidden>
  63.         <div class="tabs">tabs2</div>
  64.       </li>
  65.       <li><input type="radio" id="tabs03" name="box" hidden>
  66.         <div class="tabs">tabs3</div>
  67.       </li>
  68.       <li><input type="radio" id="tabs04" name="box" hidden>
  69.         <div class="tabs">tabs4</div>
  70.       </li>
  71.       <li><input type="radio" id="tabs05" name="box" hidden>
  72.         <div class="tabs">tabs5</div>
  73.       </li>
  74.       <li><input type="radio" id="tabs06" name="box" hidden>
  75.         <div class="tabs">tabs6</div>
  76.       </li>
  77.     </ul>
  78.   </main>
  79. </main>

  81. </body>
  82. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
不二如是
2019-9-10 16:49:52
不用 js，基本不行。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2019-9-10 16:49:52 | 显示全部楼层    本楼为最佳答案   
不用 js，基本不行。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-21 20:08

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表