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特异性！一类＆lt;一个类+一个元素。所以将“.infohighlighted”改为例如“.sidebox li.infohighlighted”，你的基本突出显示应该有效。

我不确定你的意思“另外，我仍然坚持如何从前一个元素中删除灰色底部边框”，请详细说明。

PS：此外，还有一些案例不匹配 - sidebox与sideBox。

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

1 个答案: