css - first 和 end 之间 li 的不同风格

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>

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

Answer 1

第一种解决方案:为第一个和最后一个元素自定义样式

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

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

您将获得:

• All
• Refresh
• Something else
• Saved

第二种解决方案:将样式应用于元素 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; }

将产生:

• All
• Refresh
• Something else
• Saved