我正在开发一个包含四个项目的列表 . 每个项目都需要有一个顶部和底部边框，默认值为1px实心灰色 . 这是一个javascript roator，它会将“突出显示的”类添加到选定的列表元素中 . 所选列表元素必须为2px纯蓝色 . 我没有选择旋转工作和基本样式 . 我试图用jquery（infoHighlighted）来应用第二个类来覆盖边界，但这似乎不起作用 . 另外，我坚持如何从前一个元素中删除灰色底部边框...我知道这应该很简单我只是无法绕过它 .
EDIT - To clarify, the highlight issue is now solved thanks to HardyHarzen. My last issue is that the previous list elements lower border needs to be removed so that the highlight doesn't have the previous elements 1px lower grey border just above it.
.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>
1 回答
第一部分很简单：CSS特异性！一个类<一类一个元素 . 所以将“.infohighlighted”改为例如“.sidebox li.infohighlighted”，你的基本突出显示应该有效 .
我不确定你的意思“另外，我仍然坚持如何从前一个元素中删除灰色底部边框”，请详细说明 .
PS：此外，还有一些案例不匹配 - sidebox vs sideBox .