Html 如果单击伪类，如何更改其背景色？

如果点被单击，我想更改点的颜色。如果单击了另一个点，则该点应具有上一种颜色。我试着用JavaScript来做这件事，但是用JavaScript来改变伪类的CSS是不可能的。然后我尝试使用CSS

.h-timeline-point:focus-within::before {
  background-color: #002776;
  border-color: #002776;
}

这对我没有帮助。有什么建议吗

<div class="h-timeline-container">
<ol class="h-timeline-wrap">
  <li class="h-timeline-point"><span class="point-text">
    1
    </span><span class="point-arrow-shade" style="display: block;">&nbsp;</span> <span class="point-arrow" style="display: block;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: block;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    2
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    3
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    4
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
</ol>

---

我能想象的javascript控制这一切的唯一方法是附加另一个类，并使用更具体的css选择器作为目标。i、 javascript在{//my overrides}之前添加了类：focus in:：focus，因为这将优先。但是为什么.h-timeline-point:focus in:：before在这里不起作用？

.h-timeline-icons {
  margin-left: -4px;
  font-size: 23px;
}

.h-timeline-container {
  min-height: 320px;
  margin: 30px 0;
}

h-wrapper {
  position: relative;
}

ol.h-timeline-wrap {
  position: relative;
  margin: 0;
  justify-content: space-around;
  display: flex;
  height: 1px;
  background: #d4d4d4;
}

ol.h-timeline-wrap::before {
  left: -5px;
}

ol.h-timeline-wrap::after {
  right: -10px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #9b2;
  border-radius: 3px;
}


/* ---- Timeline elements ---- */

li.h-timeline-point {
  position: relative;
  top: -10px;
  display: block;
  float: left;
  width: 150px;
  font: bold 14px arial;
}

li.h-timeline-point::before {
  content: "";
  position: relative;
  top: -10px;
  left: -4px;
  display: block;
  width: 40px;
  height: 40px;
  z-index: 0;
  border: 4px solid #009FDA;
  border-radius: 50%;
  background: #009FDA;
}

.point-text {
  right: -9px;
  z-index: 2;
  font-size: 25px;
  top: -44px;
  position: relative;
  font-weight: normal;
  color: white;
}


/* ---- Details ---- */

.point-details {
  position: absolute;
  right: 11%;
  top: 47px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #002776;
  font-size: 16px;
  background: #fff;
  color: black;
  font-weight: normal;
  width: 86%;
}


/* ---- Hover effects ---- */

.point-text:hover {
  cursor: pointer;
}

.point-arrow {
  content: "";
  position: absolute;
  left: -4px;
  top: 39px;
  display: none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #002776;
}

.point-arrow-shade {
  display: block;
  top: 41px;
  border-bottom: 20px solid #ffffff;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width: 0;
  height: 0;
  left: -4px;
  content: "";
  z-index: 2;
}

.h-timeline-point:hover::before {
  background-color: #002776;
  border-color: #002776;
}

.h-timeline-point:focus-within::before {
  background-color: #002776;
  border-color: #002776;
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {
  li.h-timeline-point {
    width: 75px;
  }
}

@media only screen and (max-width: 500px) {
  .h-timeline-container {
    min-height: 520px;
  }
  li.h-timeline-point {
    width: 65px;
  }
  .point-details {
    right: 4%;
    width: 90%;
  }
}

$('.point-text').on('click', function () {
  $('.point-details, .point-arrow, .point-arrow-shade').css('display', 'none');
  if ($(this).parent().next().css('display') == 'none') {

    $(this).parent().next().css('display', 'block');
    $(this).siblings('.point-arrow').css('display', 'block');
    $(this).siblings('.point-arrow-shade').css('display', 'block');
  }
});

$('.point-text').first().click();