带有顶部和底部边框突出显示的垂直列表

Question

我正在制定一个包含四个项目的列表。每个项目都需要有一个顶部和底部边框，默认为 1px 纯灰色。有一个 javascript roator，它将向选定的列表元素添加一个“突出显示”类。选定的列表元素需要是 2px 纯蓝色。当没有被选中时，我已经完成了旋转工作和基本样式。我尝试使用 jquery (infoHighlighted) 应用第二类来超越边界，但这似乎不起作用。此外，我不知道如何从前一个元素中删除灰色底部边框......我知道这应该很简单，我只是无法绕开它。

编辑 - 澄清一下，由于 HardyHarzen，现在突出显示的问题得到了解决。我的最后一个问题是需要删除之前的列表元素下边框，以便突出显示没有之前的元素在其上方 1px 下灰色边框。

.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

第一部分很简单：CSS 特异性！一类

我不确定您所说的“另外，我不知道如何从前一个元素中删除灰色底部边框”是什么意思，请详细说明。

PS：另外，还有一些大小写不匹配的地方——sidebox vs sideBox。