TiddlyWiki中CSS选中标签无法高亮问题求助

你遇到的选中标签无法高亮的核心问题是：CSS相邻兄弟选择器+无法跨层级匹配元素。你的radio输入框是.tabs的直接子元素，而对应的label嵌套在.tab-labels容器内，两者并非直接相邻的同级元素，所以.tabs input[type="radio"]:checked + label这条规则完全匹配不到目标元素。

下面提供两种简单可行的解决方法，你可以根据需求选择：

方法一：调整HTML结构（兼容所有场景） #

把每个radio和对应的label放在同一个容器里，让它们成为直接相邻的兄弟元素，这样原有的核心CSS规则就能生效。

修改后的HTML代码 #

<div class="tabs">
  <div class="tab-item">
    <input type="radio" id="tab1" name="tabs" checked>
    <label for="tab1">Tab 1</label>
  </div>
  <div class="tab-item">
    <input type="radio" id="tab2" name="tabs">
    <label for="tab2">Tab 2</label>
  </div>
  <div class="tab-item">
    <input type="radio" id="tab3" name="tabs">
    <label for="tab3">Tab 3</label>
  </div>

  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

对应调整的CSS代码 #

.tabs {
  display: flex;
  flex-wrap: wrap; /* 标签过多时自动换行 */
  padding-right: 1em;
}

.tabs .tab-item {
  position: relative;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  font-size: 15px;
  padding: 0.25em;
  background: #353235;
  cursor: pointer;
}

/* 现在这个规则能正常匹配到选中radio对应的label */
.tabs input[type="radio"]:checked + label {
  background-color: #4a4a4a; 
  border-bottom: 2px solid blue;
}
 
.tab-content {
  width: 100%; /* 内容块占满整行 */
  padding-left: 1em;
  border: 5px solid gray;
  display: none;
  background: #353935;
  order: 1; /* 强制内容块排在所有标签后面 */
}
 
/* 内容显示规则保持不变 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

方法二：不改HTML，用属性选择器匹配（更简便） #

如果不想调整HTML结构，可以通过for属性与radio的id对应关系，直接选中目标label，不需要依赖相邻元素关系。

修改后的核心CSS规则 #

替换你原有的.tabs input[type="radio"]:checked + label规则，改成下面这段：

/* 通过for属性匹配对应id的radio选中状态 */
.tabs #tab1:checked ~ .tab-labels label[for="tab1"],
.tabs #tab2:checked ~ .tab-labels label[for="tab2"],
.tabs #tab3:checked ~ .tab-labels label[for="tab3"] {
  background-color: #4a4a4a; 
  border-bottom: 2px solid blue;
}

其余CSS代码保持你原来的即可，这样无需改动HTML就能实现选中标签的高亮效果。

内容的提问来源于stack exchange，提问作者FrustratedBall