Question

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

我试图使用：

#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: "> "}

可悲的是，这三个例子都没有用。

我应该注意，当我删除：nth-child（2）或:: nth-child（2），并且只保留：之前，CSS命令#breadcrumbs li:before {content: "> "}正常工作。

注意：

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

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

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

我认为你的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

Answer 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冲突。

伪元素和伪类的组合不起作用

2 个答案: