结合伪元素和伪类将不起作用答案

【问题标题】：Combining pseudo element and pseudo class won't work结合伪元素和伪类将不起作用
【发布时间】：2016-09-03 22:45:03
【问题描述】：

我尝试在我网站的#breadcrumbs 部分中组合一个伪元素:before 和一个伪类:nth-child(2)。

我尝试使用：

#breadcrumbs li:before:nth-child(2) {content: "> "}
#breadcrumbs li:nth-child(2):before {content: "> "}

两者都不起作用，所以我尝试阅读它并在 Google 中找到了这个：

Combining Pseudo-selectors in CSS?

根据该讨论中的答案，还尝试在第二个伪选择器nth-child(2)之前添加两个冒号，如下所示：

#breadcrumbs li:before::nth-child(2) {content: "> "}

遗憾的是，这 3 个示例都不起作用。

我应该注意，当我删除 :nth-child(2) 或 ::nth-child(2) 并仅保留 :before 时，CSS 命令 #breadcrumbs li:before {content: "> "} 工作正常。

注意：

我用这个Drupal 8 theme（你可以下载8.x.x版本来检查CSS）；我个人将我的自定义 css 添加到自定义文件中，最后在由 library.yml 文件确定的 CSS 层次结构中。

然而，这些是我在核心 CSS 文件中找到的唯一可能相关的代码片段：

.breadcrumb li {list-style-type: none; display: inline-block}

#header, #footer, .mission, .breadcrumb, .node {clear: both}

【问题讨论】：

标签： css combinations

【解决方案1】：

这是可能的，请看这个演示

#breadcrumbs li:nth-child(2)::before {
  content: ">";
}

<ul id="breadcrumbs">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

我认为您的 CSS 中有错字。请进行此更改：

#breadcrumbs li:nth-child(2):before {content: "> "}

进入

#breadcrumbs li:nth-child(2)::before {content: "> "}

我相信您在 CSS 中需要两个冒号来表示 before，请阅读此相关问题：Why are there two colons here? span::before

【讨论】：

您给出的第一个示例在两个 li 单元之前添加了 > 符号，而不仅仅是在第二个 (nth-child(2)) 之前...第二个示例将 before last 与 2 colos -不要在我的主题中为我工作。
@Benia 我已更新 JSFiddle 以使用 :nth-child(2)::before。请看一下。你能从你的主题中发布更多的 CSS 吗？看来应该可以了。
@Benia 在您的更新中，CSS 代码引用 .breadcrumb 但原始帖子引用 #breadcrumbs；您是否需要将其中一个更改为引用 ID 或类？

【解决方案2】：

似乎 CSS 代码 #breadcrumbs li:nth-child(2)::before {content: ">"} 没问题，问题是由于 html.twig 模板文件中的 id-class 冲突造成的。

解决问题的方法是更改 breadcrumb.html.twig，来自：

{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>

收件人：

{% if breadcrumb %}
  <nav role="navigation" aria-labelledby="system-breadcrumb">
    <h2{{ 'Breadcrumb'|t }}</h2>

现在，#breadcrumbs id 指令不要与 .breadcrumb 类或 #system-breadcrumb id 中的任何一个发生冲突。

【讨论】：