Html 我的边界效果不是'；t悬停时工作不正常

我正在设计一个简单的列表，里面有一些CSS。在这种设计中，如果用户将鼠标悬停在列表项上，它将高亮显示顶部和底部边框。但是，除了最后一个悬停外，只有一个边框高亮显示

如果我删除

页边距底部：-1px然后显示
2px
边框


.list{
列表样式类型：无；
颜色：#333；
填充：0；
背景色：#fff；
}
.清单项目{
填充顶部：10px；
垫底：10px；
边框顶部：1px实心#eeeee f；
边框底部：1px实心#eeeee f；
边缘底部：-1px；
}
。列表项：悬停{
颜色：#0275d8；
边框顶部：1px实心#0275d8；
边框底部：1px实心#0275d8；
}

样本列表1
样本列表2
样本列表3
这应该对您有所帮助。这不是一个漂亮的解决方案，但我认为它是有效的


.list{
列表样式类型：无；
颜色：#333；
填充：0；
}
.清单项目{
填充顶部：10px；
垫底：10px；
边框顶部：1px纯色灰色；
}
。列表项：悬停{
颜色：#0275d8；
边框颜色：#0275d8；
}
李：悬停+李{
边框顶部颜色：#0275d8；
}
李：最后一个孩子{
边框底部：1px纯色灰色；
}

样本列表1
样本列表2
样本列表3
请申请本课程。将
页边距底部：-1px
更改为
0px


.list{
列表样式类型：无；
颜色：#333；
填充：0；
背景色：#fff；
}
.清单项目{
填充顶部：10px；
垫底：10px；
边框顶部：1px实心#eeeee f；
边框底部：1px实心#eeeee f；
边缘底部：0px；
}
。列表项：悬停{
颜色：#0275d8；
边框顶部：1px实心#0275d8；
边框底部：1px实心#0275d8；
}

样本列表1
样本列表2
样本列表3
这是因为下面的
列表项仍然有一个
#eeeee f
边框顶部。解决此问题的一个简单方法是说下一个
。列表项
的边框顶部也应更改为
0275d8

我们可以这样做：


.list{
列表样式类型：无；
颜色：#333；
填充：0；
背景色：#fff；
}
.清单项目{
填充：10px0；
边框：实心#eeeee f；
边框宽度：1px0；
边缘底部：-1px；
}
。列表项：悬停{
颜色：#0275d8；
边框颜色：#0275d8；
}
/*下一步。列表项*/
.列表项：悬停+.列表项{
边框顶部颜色：#0275d8；
}

样本列表1
样本列表2
样本列表3
但是在第一个和第二个li之间也有一个2px的边界。你想要吗？当删除
页边距底部：-1px。你在用什么浏览器？@theoretisch:不，我不想显示2px边框。只显示1px。@Roberrrt:mozilla，chorme。您将看到2px（比您之前看到的小东西）除了第一个和最后一个边框。Chrome上没有这个问题。请检查这个。你检查过它是否正常显示2px边框吗？我们是否需要为底部添加2px，为1px添加顶部？它工作正常，但当你悬停时仍在下方显示灰色的底部边框。@Kiran我修复了它，试试看是的，但@Andrew's one更干净。你的
li
风格正在影响我的另一个
li
！是的，我想你希望所有的行都是1px。@theoretisch用法：最后一个孩子没有底层阶级啊，好吧，我想第一个和第二个li之间的行也应该是1px。@Kiran我现在也对CSS做了一些优化。