1

这是我的问题：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 蓝色边框，将其定位在与这张图片上完全相同的单元格上。

4

2 回答 2

0

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

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-index

（我已经通过 CSS 更新了样式；我不喜欢内联样式 :-)

于 2013-09-10T17:37:01.840 回答
0

但是在 IE <9 中不支持在 css 中使用：nth-​​child ()，您可以通过 javascript 执行此操作，如下所示：demo：

$('ul li').eq(4).css("border","2px solid blue");
于 2013-09-10T17:47:04.750 回答