我使用html CSS在我的页面上的内容下有三个带有earch标签的标签。目前所有的标签都是相同的颜色。我已经尝试了，但没有得到解决方案，我希望每个标签是不同的颜色时，点击，我想下降箭头选定的标签请检查代码，谢谢提前非常感谢

顺晟科技：

您可以尝试更改设置每个选项卡的颜色:

.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 {
    background-color: #8C0052;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    color:#ffffff;
}

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

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

.tab-sii:checked + label:hover {
    box-shadow: 0 -1px 0 #fff inset;
    background-color: #8C0052;
}
.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;
}

对于箭头，我真的不明白你想要什么...

所以它使得: