如何解决自定义Tab组件内TD元素背景色不生效问题？

核心问题 #

你遇到的样式不生效主要有两个原因：

1. CSS选择器逻辑错误：#tab2是radio输入框，和.content是<li>下的同级元素，并非嵌套关系，所以.nav_tabs #tab2 .content td这种父子层级的选择器无法匹配到目标TD元素。
2. HTML结构不完整：第一个Tab的<div class="content">标签未闭合，导致DOM结构错乱，可能影响后续样式解析。

修复步骤 #

1. 修正HTML结构

补全第一个<li>里未闭合的.content标签：

<li>
    <input type="radio" name="tabs" class="rd_tabs" id="tab1" checked>
    <label for="tab1">tab1</label>
    <div class="content">
        <article>                    
        </article>
    </div> <!-- 补上该闭合标签 -->
</li>

2. 调整CSS选择器

根据需求选择对应写法：

给所有Tab内的TD设置背景色

保留你已写的选择器，结构修正后即可生效：

.nav_tabs .content td {
    background: lightcyan;
}

仅给Tab2内的TD设置背景色

利用radio的:checked状态关联同级的.content，写法如下：

.nav_tabs #tab2:checked ~ .content td {
    background: lightcyan;
}

逻辑说明 #

Tab组件的显示逻辑依赖rd_tabs:checked ~ .content实现，通过同级选择器~可精准关联选中Tab对应的内容区域，再嵌套选择TD元素就能正确应用样式。

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