Vertikale Liste mit oberen und unteren Rand markieren

Question

Ich entwickle eine Liste von vier Elementen. Jedes Element muss einen oberen und unteren Rand mit einem Standard von 1px solid grey haben. Es gibt einen JavaScript-Roator, der dem ausgewählten Listenelement eine 'hervorgehobene' Klasse hinzufügt. Das ausgewählte Listenelement muss 2px blau sein. Ich habe die Rotation funktioniert und das grundlegende Styling, wenn nicht ausgewählt wird. Ich habe versucht, eine zweite Klasse mit jquery (infoHighlighted) anzuwenden, um die Grenzen zu überschreiten, aber das scheint nicht zu funktionieren. Außerdem bin ich fest, wie ich den grauen unteren Rand vom vorherigen Element entfernen kann ... Ich weiß, das sollte einfach sein Ich kann meinen Kopf einfach nicht darum wickeln.

Bearbeiten - Um zu verdeutlichen, ist das Highlight-Problem jetzt dank HardyHarzen gelöst. Mein letztes Problem ist, dass der untere Rand der vorherigen Listenelemente entfernt werden muss, damit die Hervorhebung nicht die vorherigen Elemente 1px unteren grauen Rand knapp darüber hat.

.sideBox { 
    width: 225px; 
    float: right; 

} 

.sidebox ul { 

    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-indent: 0; 
} 

.sidebox li { 
    height:124px; 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px solid #666; 
} 


.sidebox li:first-child{ 
    height:123px; 
    border-top: 1px solid #666; 
    border-bottom: 1px solid #666; 
} 

.sidebox h4, .sidebox p 
{ 
    margin: 0; 
    color: #707070; 
    padding:0; 
    font-size: 25px; 
} 

.infoHighlighted { 
    border-top: 2px solid #00A4E4;  
    border-bottom: 2px solid #00A4E4;  
} 
.infoHighlighted h4 { 
    color: #00A4E4; 
    font-family: Georgia; 
    font-size: 25px; 
} 
    <div class="sideBox"> 
        <ul> 
         <li id="infoBox_0" class="infoHighlighted"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_1"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_2"><h4>Header Here</h4><p>One Sentence</p></li> 
         <li id="infoBox_3"><h4>Header Here</h4><p>One Sentence</p></li> 
        </ul> 
       </div> 

Answer 1

Der erste Teil ist einfach: Die CSS Spezifität! Eine Klasse < eine Klasse + ein Element. So ändern Sie ".infohighlighted" in z. ".sidebox li.infohighlighted" und Ihre grundlegende Hervorhebung sollte funktionieren.

Ich bin mir nicht sicher, was Sie mit "Darüber hinaus, ich bin auf, wie man den grauen unteren Rand aus dem vorherigen Element entfernen", bitte erläutern.

PS: Außerdem gibt es einige Fälle nicht übereinstimmen in - Sidebox vs SideBox.