基于子元素的样式父元素

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>