CSS默认Tab刷新后文字不可读，如何设置初始Tab文字为白色？

你的问题出在页面加载时，首个默认Tab并没有带上aria-selected="true"属性，导致你写的激活态CSS样式没作用在它身上，所以文字还是黑色。可以通过以下两种方式解决：

方法一：规范HTML结构（推荐） #

修改页面HTML，让首个Tab元素在加载时就自带aria-selected="true"属性，这样你的原有CSS就能直接生效，同时符合ARIA无障碍规范。

方法二：用CSS强制选中首个Tab #

如果无法修改HTML，就在现有CSS里新增针对首个Tab的样式，确保页面加载时它的文字是白色：

/* 默认选中首个Tab的样式 */
.tab-format [role="tab"]:first-child {
  color: white;
  background-color: black;
  opacity: 1;
  border-top: 6px solid lightgray;
}

/* 激活态Tab样式（点击切换后保持） */
.tab-format [role="tab"][aria-selected="true"] {
  background-color: black;
  opacity: 1;
  border-top: 6px solid lightgray;
  color: white;
}

.tab-format a:focus {
  background-color: black;
  opacity: 1;
  color: white;
}

.tab-format a:hover {
  background-color: black;
  opacity: 1;
  color: white;
}

注意：你原有代码里的border-top: 6px;缺少边框样式（比如solid），这样边框不会显示，所以要补全为border-top: 6px solid lightgray;。

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