Question

我想要设置ul的样式，但是第一个li和最后一个li应该具有不同于它们之间的样式。

我知道下面的代码可能非常错误，但是你能看到我想要做的吗？

.menu li:hover:not(.menu li:nth-last-child(1)) { border:red solid 1px; }

HTML只是基本的，只是想要一些我可以用于任何其他菜单的CSS样式。

<ul class="menu">
   <li>All</li><li>Refresh</li><li>Saved</li>
</ul>

那么，当用户将鼠标悬停在它们上面时，我该如何设计中间的样式呢？我想这样做是为了避免在每个列表项的中间放置边框。

Answer 1

第一个解决方案：第一个和最后一个元素的自定义样式

一种方法是为每个<li>元素设置样式，然后自定义第一个和最后一个元素。为此，:first-child和:last-child是您的朋友。

使用HTML，例如：

<ul class="menu">
    <li>All</li>
    <li>Refresh</li>
    <li>Something else</li>
    <li>Saved</li>
</ul>

和以下CSS：

.menu li:first-child { font-weight: bold; }
.menu li:last-child { font-style: italic; }

你将获得：

所有

刷新

其他东西

保存

第二种解决方案：将元素2的样式应用于 n -1

如果由于某种原因，您无法为所有列表元素定义公共样式，并为第一个和最后一个自定义样式，则可以使用:not关键字。 .menu li:not(:first-child)将排除第一个元素，.menu li:not(:last-child) - 排除最后一个元素。

以这种方式多次:not are combined：

element:not(selector1):not(selector2)

表示您的CSS变为：

.menu li:not(:first-child):not(:last-child)

例如：

.menu li:not(:first-child):not(:last-child) { font-weight: bold; }

将产生：



所有

的刷新

其他

保存

Answer 2

尝试使用CSS选择器。下面的代码将影响父级（UL）的第一个和最后一个子级。

ul:first-child {
 Style attributes here
}

ul:last-child {
  Style attributes here
}

此处有关CSS选择器的更多信息http://www.w3schools.com/cssref/css_selectors.asp

第一和第二之间的不同风格

2 个答案:

第一个解决方案：第一个和最后一个元素的自定义样式

第二种解决方案：将元素2的样式应用于 n -1