-1

我有药丸标签,其中每种颜色都是#d7e5ea。我想将所选药丸选项卡(活动药丸选项卡)的颜色更改为#83a8b5,而非活动(未选中)保持在#d7e5ea。

我可以申请什么自定义 css 来进行此更改?我之前尝试过更改背景颜色。

@media all{
a{background-color:transparent;}
a:active,a:hover{outline-width:0;}
*,*:before,*:after{box-sizing:border-box;}
a{-ms-touch-action:manipulation;touch-action:manipulation;}
.nav{margin:0;padding:0;}
.nav{width:100%;position:relative;display:inline-block;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;}
.nav>li{display:inline-block;list-style:none;margin:0;padding:0;position:relative;margin:0 7px;transition:background-color .3s;}
.nav>li>a{padding:10px 0;display:inline-block;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;}
.nav-center{-ms-flex-pack:center;justify-content:center;}
.nav>li>a{color:rgba(102,102,102,.85);transition:all .2s;}
.nav>li>a:hover,.nav>li.active>a{color:rgba(17,17,17,.85);}
.nav li:first-child{margin-left:0!important;}
.nav li:last-child{margin-right:0!important;}
.nav-uppercase>li>a{letter-spacing:.02em;text-transform:uppercase;font-weight:bolder;}
.nav-pills>li.active>a{opacity:1;color:#fff;background-color:#446084;}
.tabbed-content .nav{width:100%;}
.nav-pills>li{margin:0;}
.nav-pills>li>a{padding:0 .75em;border-radius:99px;line-height:2.5em;}
a{color:#334862;text-decoration:none;}
a:focus{outline:none;}
a:hover{color:#000;}
ul{list-style:disc;}
ul{margin-top:0;padding:0;}
li{margin-bottom:.6em;}
ul{margin-bottom:1.3em;}
.nav>li>a{font-size:.8em;}
.nav-pills>li.active>a{background-color:#83a8b5;}
.nav>li>a{font-family:"Open Sans",sans-serif;}
.nav>li>a{font-weight:700;}
.nav>li>a{text-transform:none;}
a{color:#83a8b5;}
a:hover{color:#5e96aa;}
}

a{background-color:transparent;}
a:active,a:hover{outline:0;}
*,::after,::before{box-sizing:border-box;}
a{background-color:transparent;text-decoration:none;}
a,a:visited{color:#554e8e;}
a:hover{text-decoration:underline;}
a:active,a:hover{outline:0;}
ul{margin:0 0 12px;padding:0 0 0 18px;}
li{margin-bottom:6px;}

@media all{
.nav-pills>li{font-size:18px!important;}
a:hover{color:#282828;}
a,a:visited{color:#7d7d7d;}
.nav-pills>li.active>a{font-size:14px!important;}
.nav>li>a{font-size:14px!important;font-weight:400;color:#666;}
li{list-style-type:none!important;}
.nav-pills>li>a{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#d7e5ea!important;color:#ffffff!important;text-decoration:none!important;}
.nav-pills>li>a:active{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#83a8b5!important;color:#ffffff!important;text-decoration:none!important;}
}
<ul class="nav nav-pills nav-uppercase nav-size-normal nav-center"><li class="tab active has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li></ul>

4

1 回答 1

0

有一条!important规则覆盖了您的更改

因此,您也必须!important在规则中包含 才能覆盖它:

.nav-pills>li.active>a {
    background-color: #83a8b5;
}

或者您可以在此处删除重要规则:

.nav-pills>li>a{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#d7e5ea;color:#ffffff!important;text-decoration:none!important;}

@media all{
a{background-color:transparent;}
a:active,a:hover{outline-width:0;}
*,*:before,*:after{box-sizing:border-box;}
a{-ms-touch-action:manipulation;touch-action:manipulation;}
.nav{margin:0;padding:0;}
.nav{width:100%;position:relative;display:inline-block;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;}
.nav>li{display:inline-block;list-style:none;margin:0;padding:0;position:relative;margin:0 7px;transition:background-color .3s;}
.nav>li>a{padding:10px 0;display:inline-block;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;}
.nav-center{-ms-flex-pack:center;justify-content:center;}
.nav>li>a{color:rgba(102,102,102,.85);transition:all .2s;}
.nav>li>a:hover,.nav>li.active>a{color:rgba(17,17,17,.85);}
.nav li:first-child{margin-left:0!important;}
.nav li:last-child{margin-right:0!important;}
.nav-uppercase>li>a{letter-spacing:.02em;text-transform:uppercase;font-weight:bolder;}
.nav-pills>li.active>a{opacity:1;color:#fff;background-color:#446084;}
.tabbed-content .nav{width:100%;}
.nav-pills>li{margin:0;}
.nav-pills>li>a{padding:0 .75em;border-radius:99px;line-height:2.5em;}
a{color:#334862;text-decoration:none;}
a:focus{outline:none;}
a:hover{color:#000;}
ul{list-style:disc;}
ul{margin-top:0;padding:0;}
li{margin-bottom:.6em;}
ul{margin-bottom:1.3em;}
.nav>li>a{font-size:.8em;}
.nav-pills>li.active>a{background-color:#83a8b5;}
.nav>li>a{font-family:"Open Sans",sans-serif;}
.nav>li>a{font-weight:700;}
.nav>li>a{text-transform:none;}
a{color:#83a8b5;}
a:hover{color:#5e96aa;}
}

a{background-color:transparent;}
a:active,a:hover{outline:0;}
*,::after,::before{box-sizing:border-box;}
a{background-color:transparent;text-decoration:none;}
a,a:visited{color:#554e8e;}
a:hover{text-decoration:underline;}
a:active,a:hover{outline:0;}
ul{margin:0 0 12px;padding:0 0 0 18px;}
li{margin-bottom:6px;}

@media all{
.nav-pills>li{font-size:18px!important;}
a:hover{color:#282828;}
a,a:visited{color:#7d7d7d;}
.nav-pills>li.active>a{font-size:14px!important;}
.nav>li>a{font-size:14px!important;font-weight:400;color:#666;}
li{list-style-type:none!important;}
.nav-pills>li>a{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#d7e5ea;color:#ffffff!important;text-decoration:none!important;}
.nav-pills>li>a:active{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#83a8b5!important;color:#ffffff!important;text-decoration:none!important;}
}
<ul class="nav nav-pills nav-uppercase nav-size-normal nav-center"><li class="tab active has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li></ul>

于 2020-06-11T09:07:27.260 回答