基于子元素的样式父元素

Question

我正在创建一个时间轴，为此我需要一个虚线边框来表示某些事件时间。但我无法将这两种风格结合在一起。

简单地说，我需要一个固定边框用于大多数时间轴事件，除了少数几个有一个共同类，我需要一个虚线边框。到目前为止，我有以下代码。

我需要将Break事件到事件4之间的边界点缀而不是实心。任何基于CSS / JS的解决方案都可以。

.timeline {
  border-left: 4px solid #a5a5a5;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(0, 0, 0, 0.8);
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 30px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .event:before {
  left: -170px;
  color: rgba(0, 0, 0, 1);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
}
.timeline .event:after {
  box-shadow: 0 0 0 4px #a5a5a5;
  left: -37.85px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}

.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  position: relative;
}

<ul class="timeline ">
                <li class="event" data-date="09:30 - 10:00 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 1</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event" data-date="10:00 - 10:30 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 2</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event break" data-date="10:30 - 11:00 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Break</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event" data-date="11:00 - 11:30 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 4</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>

Answer 1

你应该改变你的方法

试试这个：

.timeline {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(0, 0, 0, 0.8);
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 30px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .event:before {
  left: -160px;
  color: rgba(0, 0, 0, 1);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
}

.timeline .event:after {
  box-shadow: 0 0 0 4px #a5a5a5;
  left: -8px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}

.timeline .event h3 {
  margin-top: 0px;
}

.timeline .event {
  border-left: 4px solid #a5a5a5;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  padding-bottom: 0px;
  padding-left: 40px;
  position: relative;
}

.timeline .break {
  border-left: 4px dotted #a5a5a5;
}

<ul class="timeline ">
  <li class="event" data-date="09:30 - 10:00 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 1</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event" data-date="10:00 - 10:30 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 2</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event break" data-date="10:30 - 11:00 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Break</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event" data-date="11:00 - 11:30 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 4</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>