自定義CSS奇/偶造型的時間軸

Question

我想從我創建的CSS時間軸中刪除第一行，我只想讓時間軸圓圈先顯示出來，不要在它之前有一行。我也想爲每個點的顏色設計不同的顏色，我怎樣才能做到這一點？

我試圖添加一個類到名爲.not_complete的時間線容器之一，但它並沒有改變時間線圓的顏色。

/* The actual timeline (the vertical ruler) */ 
 
.timelinex { 
 
    position: relative; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding-bottom: 5em; 
 
} 
 

 
/* The actual timeline (the vertical ruler) */ 
 
.timelinex:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0px; 
 
    background-color: #fff; 
 
    top: auto; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
.timelinex::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 4px; 
 
    background-color: #e3e3e3; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
/* Container around content */ 
 
.containerx { 
 
    padding: 10px 40px; 
 
    position: relative; 
 
    background-color: inherit; 
 
    width: 50%; 
 
} 
 

 
/* The circles on the timeline */ 
 
.containerx::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    right: -5px; 
 
    background-color: #e3e3e3; 
 
    top: 15px; 
 
    border-radius: 50%; 
 
    z-index: 1; 
 
} 
 

 
.containerx::after .not_complete { 
 
    background-color: #e3e3e3 !important; 
 
} 
 

 
/* Place the container to the left */ 
 
.leftx { 
 
    left: 0; 
 
} 
 

 
/* Place the container to the right */ 
 
.rightx { 
 
    left: 50%; 
 
} 
 

 
/* Fix the circle for containers on the right side */ 
 
.rightx::after { 
 
    left: -7px; 
 
} 
 

 
/* The actual content */ 
 
.contentx { 
 
    padding: 2px 3px; 
 
    position: relative; 
 
    border-radius: 6px; 
 
}

<div class="timelinex"> 
 
    <div class="containerx leftx not_complete"> 
 
    <div class="contentx"> 
 
     <p> 
 
     <img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"> 
 
     </p> 
 
     <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5> 
 
     <div> Test Timeline Step 1</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這裏的選擇是無效的：

.containerx::after .not_complete { 

這將選擇::after僞元素的孩子。您需要使用：

.containerx.not_complete::after { 

上述選擇器選擇任何元素的::after僞元素，類containerx和not_complete。所以請用您的代碼替換：

.containerx.not_complete::after { 
    background-color: #e3e3e3 !important; 
} 

希望這可以解決您的問題。

完整片段

/* The actual timeline (the vertical ruler) */ 
 
.timelinex { 
 
    position: relative; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding-bottom: 5em; 
 
} 
 

 
/* The actual timeline (the vertical ruler) */ 
 
.timelinex:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0px; 
 
    background-color: #fff; 
 
    top: auto; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 

 
.timelinex::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 4px; 
 
    background-color: #e3e3e3; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
/* Container around content */ 
 
.containerx { 
 
    padding: 10px 40px; 
 
    position: relative; 
 
    background-color: inherit; 
 
    width: 50%; 
 
} 
 

 
/* The circles on the timeline */ 
 
.containerx::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    right: -5px; 
 
    background-color: #e3e3e3; 
 
    top: 15px; 
 
    border-radius: 50%; 
 
    z-index: 1; 
 
} 
 

 
.containerx.not_complete::after { 
 
    background-color: #e3e3e3 !important; 
 
} 
 

 

 
/* Place the container to the left */ 
 
.leftx { 
 
    left: 0; 
 
} 
 

 
/* Place the container to the right */ 
 
.rightx { 
 
    left: 50%; 
 
} 
 

 

 
/* Fix the circle for containers on the right side */ 
 
.rightx::after { 
 
    left: -7px; 
 
} 
 

 
/* The actual content */ 
 
.contentx { 
 
    padding: 2px 3px; 
 
    position: relative; 
 
    border-radius: 6px; 
 
}

<div class="timelinex" > 
 
    <div class="containerx leftx not_complete"> 
 
    <div class="contentx"> 
 
     <p><img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"></p> 
 
     <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5> 
 
     <div> Test Timeline Step 1</div> 
 
    </div> 
 
    </div> 
 
</div>

更新：對於偶/奇造型和第一個孩子。

要創建奇數和偶數樣式，您需要使用:nth-child()選擇器。它有藍色和紅色的一個例子是在這裏：

li { 
 
    display: block; 
 
    width: 200px; 
 
    padding: 10px; 
 
    color: #fff; 
 
} 
 
li:nth-child(odd) { 
 
    background: #00f; 
 
} 
 
li:nth-child(even) { 
 
    background: #f00; 
 
} 
 
li:first-child { 
 
    background: #000; 
 
    font-weight: bold; 
 
}

<ul> 
 
    <li>First Child</li> 
 
    <li>Even</li> 
 
    <li>Odd</li> 
 
    <li>Even</li> 
 
    <li>Odd</li> 
 
</ul>