HTML/CSS标签页实现不同选中颜色与选中箭头问题咨询

核心问题点 #

• 类选择器书写错误：原代码使用.tab-sii .tab-sii-1带空格的后代选择器，无法匹配同时携带tab-sii和one/second/third类的单选框元素，且单选框自定义类为one/second/third，不是tab-sii-1/tab-sii-2，导致个性化选中色不生效
• 通用样式优先级问题：通用的.tab-sii:checked + label设置了统一选中色，优先级高于写错的个性化样式，所以所有标签选中后颜色相同

修复代码 #

CSS修改部分 #

你只需替换原CSS中标签选中相关的样式即可，完整修改后的CSS代码如下：

.tab-wrap {
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin: 40px 0;
}

.tab-sii {
    display: none;
}
    

.tab-sii:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab-sii:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
          transform: translateY(0px);
    text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tab-sii:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab-sii:last-of-type:not(:first-of-type) + label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* 去掉通用背景色配置，改到各个个性化样式里，新增相对定位用于箭头定位 */
.tab-sii:checked + label {
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
    position: relative;
}

/* 修正选择器，匹配对应类的单选框 */
.tab-sii.one:checked + label {
    background-color: #009297;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii.second:checked + label {
    background-color: #ffc20e;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

.tab-sii.third:checked + label {
    background-color: #8C0052;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

/* 新增下拉箭头样式 */
.tab-sii:checked + label::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
}

/* 去掉hover时的通用背景色，避免覆盖个性化颜色 */
.tab-sii:checked + label:hover {
    box-shadow: 0 -1px 0 #fff inset;
}
.tab-sii + label {
    width: 100%;
    box-shadow: 0 -1px 0 #eee inset;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    text-align: center;
    background-color: #EAF6F6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
    color: #000000;
    font-size: 22px;
}

HTML调整提醒 #

原有HTML代码末尾的<div class="tab__content">开启后存在3个未闭合的div标签，实际使用时请补全对应闭合标签，避免布局异常，无需其他修改。

实现效果 #

• 三个标签选中色分别为：LEARN对应蓝绿色、THRIVE对应黄色、EXPLORE对应紫红色，可自行修改CSS中的色值调整
• 选中的标签底部会自动显示居中的白色下拉箭头，指向下方内容区域

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