如何使用CSS为ul / lis创建“选定效果”？

Question

这是我到目前为止创造的。 我想增加第一个li项的高度，以便它覆盖其ul的底部边框。

在我的应用程序中，我想使用此方法创建“选定”效果。 没有JS，这可能吗？

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    border: 5px solid #999;
    font-size: 0;
}

li {
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

HTML

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>

Answer 1

你可以像这样写：

li:first-child{
  margin-bottom:-5px;
  padding-bottom:30px;
  }

请查看此http://cssdesk.com/QWbvc

Answer 2

你可以参考sandeep的答案，但也试试这个 - 只需为父元素指定修复高度，并在<li>高度增加后看看它是如何工作的

ul，li {margin：0; 填充：0; list-style：none; }

ul {
    border: 5px solid #999;
    font-size: 0;
    height:79px;
}

li{
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
}

li:first-child {
    height:25px;
} 

要么

li:first-child {
    padding-bottom:30px;
} 

Answer 3

您需要在所选元素中添加类似“active”的类，然后为元素编写一些规则。 检查这个jsfiddle.net/p85Ey/