你遇到的这个问题其实是CSS选择器的作用范围导致的——咱们先拆解一下原因：

你的代码里用了兄弟选择器（~）来控制语言内容的显示，比如#eng:target ~ .eng，但这个选择器只能选中和#eng处于同一个父元素下的后续兄弟元素。而<form>是一个独立的容器，里面的.tab元素属于form的子元素，和外面的#eng/#deu锚点根本不是同一个父级的兄弟，所以你的选择器根本找不到form内部的元素，自然就不会生效啦。

解决方案：扩展选择器范围，覆盖form内部元素 #

我们只需要调整CSS选择器，明确指定要同时选中form外的兄弟元素和form内的子元素，就能解决这个问题。这里有两种可行的写法：

写法1：明确指定form内的元素（兼容性好）

修改你的CSS代码如下：

/* 默认隐藏所有tab，显示默认的英文内容 */
.tab { display: none; }
.default-tab { display: block; }

/* 切换到英文时：显示所有.eng元素，隐藏.deu元素 */
#eng:target ~ .eng,
#eng:target form .eng {
  display: block;
}
#eng:target ~ .deu,
#eng:target form .deu {
  display: none;
}

/* 切换到德文时：显示所有.deu元素，隐藏.eng元素 */
#deu:target ~ .deu,
#deu:target form .deu {
  display: block;
}
#deu:target ~ .eng,
#deu:target form .eng {
  display: none;
}

这样不管语言内容是在form外面还是里面，只要带有.eng/.deu类，就能被正确控制显示状态。

写法2：用:has()选择器（更简洁，需现代浏览器支持）

如果你的项目不需要兼容旧版浏览器，可以用CSS的:has()选择器实现全局控制，代码更简洁：

.tab { display: none; }
.default-tab { display: block; }

/* 当#eng被激活时，全局显示.eng，隐藏.deu */
body:has(#eng:target) .eng { display: block; }
body:has(#eng:target) .deu { display: none; }

/* 当#deu被激活时，全局显示.deu，隐藏.eng */
body:has(#deu:target) .deu { display: block; }
body:has(#deu:target) .eng { display: none; }

:has()选择器可以检测父容器下的目标状态，直接控制全局所有对应类的元素，不用再逐个指定form内外的选择器。

测试修改后的完整代码 #

把调整后的CSS和你的原有HTML结合，就能看到form内外的语言内容都能正常切换了：

<a href="#eng"><img src="http://icons.iconarchive.com/icons/custom-icon-design/flat-europe-flag/48/United-Kingdom-icon.png"></a> 
<a href="#deu"><img src="http://icons.iconarchive.com/icons/custom-icon-design/flat-europe-flag/48/Germany-icon.png"></a> 
<a id="eng"></a> 
<a id="deu"></a> 

<div class="tab eng default-tab">Some English content</div> 
<div class="tab deu">Was auf deutsch.</div>

<form>
  <input type="radio" name="gender" value="male" checked> 
  <div class="tab eng default-tab">Male</div> 
  <div class="tab deu">Männlich</div> 
  <br> 
  <input type="radio" name="gender" value="female"> 
  <div class="tab eng default-tab">Female</div> 
  <div class="tab deu">Weiblich</div> 
</form> 

<hr> 
<div class="tab eng default-tab">Male</div> 
<div class="tab deu">Männlich</div>

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