Question

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蓝色边框，将其定位为与this picture.上的单元格完全相同

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;
}

demo

诀窍是将z-index设置为大于邻居

的元素

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

Answer 2

但在IE＆lt; 9中不支持使用带有css的：nth-child（），你可以通过javascript执行此操作，如下所示：demo：

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

当它位于带有1px边框的UL“表格”（用-1px左上边距和左边距制作）时，如何制作一个带有2px四边边框的LI

2 个答案: