基于子元素的样式父元素

Question

我正在创建一个时间轴，为此我需要为某些事件时间添加虚线边框。但是我不能把这两种风格结合在一起。

简而言之，我需要为大多数时间线事件设置实线边框，但少数具有共同 class 的事件除外，我需要虚线边框。到目前为止，我有以下代码。

我需要 Break 事件到 Event 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>

基于子元素的样式父元素

style parent element based on child elements

html

javascript

css

jquery

timeline