具有奇/偶样式的自定义CSS时间轴

Question

我想从我创建的CSS时间轴中删除第一行，我只想让时间轴圈首先显示不要在它之前有一行。我也想为每个点设置不同颜色的样式，我怎么能这两个呢？

我试图将一个类添加到一个名为.not_complete的时间轴容器中，但它不会改变时间轴圆的颜色。

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此处的选择器无效：

.containerx::after .not_complete {

它将选择::after伪元素的子元素。你需要使用：

.containerx.not_complete::after {

上面的选择器选择任何元素的::after伪元素，类containerx和not_complete。所以请用以下代码替换您的代码：

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

希望这能解决您的问题。

完整代码段

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新：适用于偶数/奇怪的造型和第一个孩子。

要创建奇怪且均匀的样式，您需要使用:nth-child()选择器。蓝色和红色的例子在这里：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;