嵌套id的CSS未被覆盖

Question

在下面的代码中，li:after的CSS在progressBarSlot中不起作用。将圆放入插槽后，连接圆的线将不可见。

这是我的模板。

slot {
width: 100%;
display: block;
}
.top-padded {
padding-top: 34px
}
.progress-bar-padding {
padding-bottom: 40px;
padding-left: 50px;
}
.left-padded {
padding-left: 100px
}
.stick-to-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.footer-padding {
padding-top: 44px
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #FAFAFA;
}
.content {
flex: 1;
}
.nav-bar {
background-color: #FAFAFA;
}
.progress-bar-box {
width: 100%;
align: center;
}
li {
list-style-type: none;
float: left;
width: 16.66%;
position: relative;
text-align: center;
font-family: AEmb, Helvetica, Arial, sans-serif;
font-size: 10px;
}
li:before {
content: '';
width: 10px;
height: 10px;
line-height: 30px;
border: 2px solid #002f36;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
li:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #002f36;
top: 5px;
left: -50%;
z-index: -1;
}
li:first-child:after {
content: none;
}
li.complete:before {
border-color: #002f36;
background-color: #002f36;
}
li.active:before {
border-color: aqua;
}

<div class="katal wrapper">
<div class="content">
<div class="kat-row">
<slot name="headerSlot">
</slot>
</div>
<section class="container">
<div class="kat-row progress-bar-padding">
<div id="progress-bar-parent">
<ul class="progress-bar-box">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</div>
<div class="kat-row top-padded">
<div class="kat-col-md-2">
</div>
<div class="kat-col-md-6">
<slot name="bannerSlot"></slot>
<slot name="bodySlot1"></slot>
<slot name="bodySlot2"></slot>
<slot name="bodySlot3"></slot>
<slot name="bodySlot4"></slot>
<slot name="bodySlot5"></slot>
<slot name="bodySlot6"></slot>
<slot name="bodySlot7"></slot>
<slot name="bodySlot8"></slot>
<div class="kat-row top-padded">
<slot name="navControlSlot"></slot>
</div>
<div class="top-padded nav-bar">
<slot name="navSlot"></slot>
</div>
</div>
<div class="kat-col-md-1">
</div>
<div class="kat-col-md-3">
<slot name="rightVerticalSlot">
</slot>
</div>
</div>
</section>
</div>
<div class="kat-row footer-padding flex-footer">
<slot name="footerSlot">
</slot>
</div>
</div>

这是进度条：

.progress-bar-box {
width: 100%;
align: center;
}
li {
list-style-type: none;
float: left;
width: 16.66%;
position: relative;
text-align: center;
font-family: AEmb, Helvetica, Arial, sans-serif;
font-size: 10px;
}
li:before {
content: '';
width: 10px;
height: 10px;
line-height: 30px;
border: 2px solid #002f36;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
li:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #002f36;
top: 5px;
left: -50%;
z-index: -1;
}
li:first-child:after {
content: none;
}
li.complete:before {
border-color: #002f36;
background-color: #002f36;
}
li.active:before {
border-color: aqua;
}

<div id="progress-bar-parent">
<ul class="progress-bar-box">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>

Answer 1

您的z索引需要修复

基本上，li:before需要相对位置，以便可以将z-index设置为1(z索引仅适用于具有位置的元素(，li:after的z-index需要设置为0，以便可见

slot {
width: 100%;
display: block;
}
.top-padded {
padding-top: 34px
}
.progress-bar-padding {
padding-bottom: 40px;
padding-left: 50px;
}
.left-padded {
padding-left: 100px
}
.stick-to-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.footer-padding {
padding-top: 44px
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #FAFAFA;
}
.content {
flex: 1;
}
.nav-bar {
background-color: #FAFAFA;
}
.progress-bar-box {
width: 100%;
align: center;
}
li {
list-style-type: none;
float: left;
width: 16.66%;
position: relative;
text-align: center;
font-family: AEmb, Helvetica, Arial, sans-serif;
font-size: 10px;
}
li:before {
content: '';
width: 10px;
height: 10px;
line-height: 30px;
border: 2px solid #002f36;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 1;
position: relative;
}
li:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #002f36;
top: 5px;
left: -50%;
z-index: 0;
}
li:first-child:after {
content: none;
}
li.complete:before {
border-color: #002f36;
background-color: #002f36;
}
li.active:before {
border-color: aqua;
}

<div class="katal wrapper">
<div class="content">
<div class="kat-row">
<slot name="headerSlot">
</slot>
</div>
<section class="container">
<div class="kat-row progress-bar-padding">
<div id="progress-bar-parent">
<ul class="progress-bar-box">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</div>
<div class="kat-row top-padded">
<div class="kat-col-md-2">
</div>
<div class="kat-col-md-6">
<slot name="bannerSlot"></slot>
<slot name="bodySlot1"></slot>
<slot name="bodySlot2"></slot>
<slot name="bodySlot3"></slot>
<slot name="bodySlot4"></slot>
<slot name="bodySlot5"></slot>
<slot name="bodySlot6"></slot>
<slot name="bodySlot7"></slot>
<slot name="bodySlot8"></slot>
<div class="kat-row top-padded">
<slot name="navControlSlot"></slot>
</div>
<div class="top-padded nav-bar">
<slot name="navSlot"></slot>
</div>
</div>
<div class="kat-col-md-1">
</div>
<div class="kat-col-md-3">
<slot name="rightVerticalSlot">
</slot>
</div>
</div>
</section>
</div>
<div class="kat-row footer-padding flex-footer">
<slot name="footerSlot">
</slot>
</div>
</div>