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

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 { 边距：0; 填充：0；列表样式：无；}

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

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