HTML&CSS标签栏问题：未激活标签文本颜色修改无效如何解决？

我用HTML创建了一组带标签的单选按钮，代码如下：

<input id="radio1" type="radio" name="css-tabs" checked>
<input id="radio2" type="radio" name="css-tabs">
<input id="radio3" type="radio" name="css-tabs">
<input id="radio4" type="radio" name="css-tabs">
<div id="tabs">
    <label id="tab1" for="radio1">Home</label>
    <label id="tab2" for="radio2">Services</label>
    <label id="tab3" for="radio3">Locations</label>
    <label id="tab4" for="radio4">Profile</label>
</div>

当前激活标签是蓝色背景、白色文本，但未激活标签同样是白色文本，导致未激活时无法看清文字。我尝试将未激活标签的文本设置为黑色，但修改label的样式（如添加color: #000000）并未生效。以下是我使用的标签栏CSS代码：

input[name=css-tabs] {
  display: none;
}

a {
  color: #F29A77;
}

#tabDiv {
  background: #FFFFF;
  font-family: "Open Sans", "Arial";
}

#tabs {
  padding: 0 0 0 50px;
  width: calc(100% + 50px);
  margin-left: -50px;
  background: #FFFFF;
  height: 80px;
  border-bottom: 5px solid #2D9CCA;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#tabs::before {
  content: "Test1";
  display: block;
  position: absolute;
  z-index: -100;
  width: 100%;
  left: 0;
  margin-top: 16px;
  height: 80px;
  background: #2B2A28;
  border-bottom: 5px solid #2D9CCA;
}

#tabs::after {
  content: "Test2";
  display: block;
  position: absolute;
  z-index: 0;
  height: 80px;
  width: 102px;
  background: #2D9CCA;
  transition: transform 400ms;
}

#tabs label {
  position: relative;
  z-index: 100;
  display: block;
  float: left;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  width: 100px;
  height: 100%;
  cursor: pointer;
  color: white;
}

#tabs label::before {
  content: "";
  display: block;
  height: 30px;
  width: 30px;
  z-index: -100;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(50%);
  margin: 10px auto;
  color: white;
}

#tab1::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}

#tab2::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}

#tab3::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}

#tab4::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}

#radio1:checked~#tabs #tab1::before,
#radio2:checked~#tabs #tab2::before,
#radio3:checked~#tabs #tab3::before,
#radio4:checked~#tabs #tab4::before {
  filter: invert(100%);
}

#radio1:checked~#tabs::after {
  transform: translateX(0);
}

#radio2:checked~#tabs::after {
  transform: translateX(101px);
}

#radio3:checked~#tabs::after {
  transform: translateX(202px);
}

#radio4:checked~#tabs::after {
  transform: translateX(303px);
}

问题原因与修复方案 #

原因分析 #

你给所有#tabs label统一设置了color: white，但未激活标签的背景是深色（#2B2A28），白色文本在深色背景上对比度不足，导致看不清。之前修改未生效是因为没有针对激活/未激活状态分别设置颜色。

修复步骤 #

• 修改默认标签文本颜色：将#tabs label的color改为适配深色背景的浅灰色（比如#ccc），作为未激活状态的文本颜色；
• 给激活状态的标签单独设置白色文本：利用CSS兄弟选择器，给被选中单选按钮对应的标签添加color: white规则。

修改后的完整CSS代码 #

input[name=css-tabs] {
  display: none;
}

a {
  color: #F29A77;
}

#tabDiv {
  background: #FFFFF;
  font-family: "Open Sans", "Arial";
}

#tabs {
  padding: 0 0 0 50px;
  width: calc(100% + 50px);
  margin-left: -50px;
  background: #FFFFF;
  height: 80px;
  border-bottom: 5px solid #2D9CCA;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#tabs::before {
  content: "Test1";
  display: block;
  position: absolute;
  z-index: -100;
  width: 100%;
  left: 0;
  margin-top: 16px;
  height: 80px;
  background: #2B2A28;
  border-bottom: 5px solid #2D9CCA;
}

#tabs::after {
  content: "Test2";
  display: block;
  position: absolute;
  z-index: 0;
  height: 80px;
  width: 102px;
  background: #2D9CCA;
  transition: transform 400ms;
}

#tabs label {
  position: relative;
  z-index: 100;
  display: block;
  float: left;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  width: 100px;
  height: 100%;
  cursor: pointer;
  /* 修改未激活标签文本颜色为浅灰色 */
  color: #ccc;
}

#tabs label::before {
  content: "";
  display: block;
  height: 30px;
  width: 30px;
  z-index: -100;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(50%);
  margin: 10px auto;
}

#tab1::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}

#tab2::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}

#tab3::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}

#tab4::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}

/* 新增：给激活标签设置白色文本 */
#radio1:checked~#tabs #tab1,
#radio2:checked~#tabs #tab2,
#radio3:checked~#tabs #tab3,
#radio4:checked~#tabs #tab4 {
  color: white;
}

#radio1:checked~#tabs #tab1::before,
#radio2:checked~#tabs #tab2::before,
#radio3:checked~#tabs #tab3::before,
#radio4:checked~#tabs #tab4::before {
  filter: invert(100%);
}

#radio1:checked~#tabs::after {
  transform: translateX(0);
}

#radio2:checked~#tabs::after {
  transform: translateX(101px);
}

#radio3:checked~#tabs::after {
  transform: translateX(202px);
}

#radio4:checked~#tabs::after {
  transform: translateX(303px);
}

说明 #

• 未激活标签文本用#ccc，在深色背景上清晰可见；
• 激活标签通过兄弟选择器匹配，设置白色文本，和蓝色背景形成鲜明对比；
• 同时保留了原有图标滤镜的切换效果，整体交互逻辑不变。

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