基於子元素的樣式父元素

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>