如何制作一个带有 2px 四边边框的 LI，当它位于具有 1px 边框的 UL "table"中时(由 -1px 上边距和左边距制成)

Question

这是我的问题：http://jsfiddle.net/aWmku/

.HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li style="border: 2px solid blue;">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

.CSS

ul {
    list-style: none;
   margin: 0;
    padding: 2px;
    display:block;
    clear:both;
    width:400px;
}
li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
}

有一张用无序列表项制作的表格，使用 -1px 上边距和左边距使 1px 灰色边框折叠。我试图为其中一个单元格制作 2px 蓝色边框。放大时，第 5 个列表项上有蓝色的 2px 顶部和左侧边框，但它被右侧和底部相邻项的灰色 1px 边框覆盖。

我要实现的目标：在一个（点击/聚焦）单元格上创建 2px 蓝色边框，将其定位为与这张图片完全相同的单元格。

Answer 1

你需要的是把它放在邻居之上。

li {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 129px;
    height: 120px;
    border: 1px solid grey;
    margin-left: -1px;
    margin-top: -1px;
    padding: 8px;
    position: relative;
    z-index: 1;
}
li:nth-child(5) {
    border: 2px solid blue;
    z-index: 2;
}

演示

诀窍是将 z 索引设置为大于相邻元素的元素

（我已经更新了样式以通过 CSS 工作;我不喜欢内联样式：-）

Answer 2

但是

在IE <9中不支持使用带有css的第n个子（），您可以通过javascript执行此操作，如下所示： demo：

$('ul li').eq(4).css("border","2px solid blue");