请教css如何选择"已选择(checked)的input[radio]的label"
label和input相隔十万八千里（反正无法直接用+~等选择器选中），那么能不能根据已checked的input选到对应的label呢？（不能使用js）示例代码如下，请问能否在不使用js的情况下给对应的label加上样式呢？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
nav {
display: flex;
height: 40px;
background-color: #333;
color: goldenrod;
align-items: center;
}
.menu {
flex: 1;
padding: 0 5% 0 20%;
display: flex;
}
.menu > label {
flex: 1;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
ul, li {
display: block;
list-style: none;
}
.tabs {
display: none;
}
input:checked + div {
display: block;
}
</style>
<main>
<nav>
<h2>title</h2>
<div class="menu">
<label for="tabs01">tabs01</label>
<label for="tabs02">tabs02</label>
<label for="tabs03">tabs03</label>
<label for="tabs04">tabs04</label>
<label for="tabs05">tabs05</label>
<label for="tabs06">tabs06</label>
</div>
</nav>
<main>
<ul>
<li><input type="radio" id="tabs01" name="box" hidden checked>
<div class="tabs">tabs1</div>
</li>
<li><input type="radio" id="tabs02" name="box" hidden>
<div class="tabs">tabs2</div>
</li>
<li><input type="radio" id="tabs03" name="box" hidden>
<div class="tabs">tabs3</div>
</li>
<li><input type="radio" id="tabs04" name="box" hidden>
<div class="tabs">tabs4</div>
</li>
<li><input type="radio" id="tabs05" name="box" hidden>
<div class="tabs">tabs5</div>
</li>
<li><input type="radio" id="tabs06" name="box" hidden>
<div class="tabs">tabs6</div>
</li>
</ul>
</main>
</main>
</body>
</html> 不用 js，基本不行。。。
页:
[1]