之前和之后的 CSS 孩子答案

【问题标题】：Css childs of before & after之前和之后的 CSS 孩子
【发布时间】：2015-10-08 20:48:39
【问题描述】：

在 ul 中我有 6 个 lis，我想取最后 5 个 lis :before 和 :after

我如何得到这个的孩子（期待第一个）：

nav li a:before, nav li a:after {
}

我试过了，但没有用：

nav li:nth-child(n+5) a:before, nav li:nth-child(n+5) a:after {
    content:none; 
}

【问题讨论】：

【解决方案1】：

有两种方法可以解决这个问题。一种方法是简单地将样式应用于以下内容：

nav li a:before, nav li a:after {
}

然后只为第一个元素覆盖这些样式：

nav li:first-child a:before, nav li:first-child a:after {
}

或者，您可以使用 :nth-last-child() 选择器来选择您需要的所有最后 5 个元素：

nav li:nth-last-child(-n+5) a:before, nav li:nth-last-child(-n+5) a:after {
}

这种方法的唯一问题是 IE8 不支持 :nth-last-child。

【讨论】：

【解决方案2】：

您可以使用如下所示的 css：

nav ul li:nth-child(5) a:before,
nav ul li:nth-child(5) a:after {
    content:.;
}

【讨论】：

【解决方案3】：

你可以这样做：

   nav li:not(:first-child) a::before, 
   nav li:not(:first-child) a::after {
       /* your styles here */
    }

或

    nav ul li:nth-last-child(-n+5) {
           /* your styles here */
    }

【讨论】：

【解决方案4】：

快速更新以适应：

nav ul li:nth-child(5) a:before,
nav ul li:nth-child(5) a:after {
    content:.;
}

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效