組合僞元素和僞類將不起作用

我嘗試在我的站點的我的#breadcrumbs部分中組合僞元素:before和僞類:nth-child(2)。組合僞元素和僞類將不起作用

我試着使用：

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

要麼沒有工作，所以我想了解一下，發現這在谷歌：

Combining Pseudo-selectors in CSS?

根據的答案討論時，也嘗試在第二個僞選擇器nth-child(2)之前加入兩個冒號，如下所示：

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

可悲的是這3個例子都沒有工作。

我應該注意到，當我刪除：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}

來源

2016-09-03 JohnDoea

看來，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 class，或#system-breadcrumb id。

來源

2016-09-03 14:45:03 JohnDoea

這是可能的，請看看這個演示

#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

來源

2016-09-03 08:18:46

您給出的第一個例子在兩個li單元之前添加>符號，而不是僅在第二個單元之前（第n個孩子（2））...第二個將前一個放在兩個colos上的示例 - 不適用於我在我的主題。 – JohnDoea

@Benia我已經更新JSFiddle使用'：nth-child（2）:: before'。請看一下。你能從你的主題發佈更多的CSS嗎？它似乎應該工作。 –

@Benia在你的更新中，CSS代碼引用'.breadcrumb'，但是原來的文章引用'＃breadcrumbs';是否需要將其中一個改爲引用ID或類？ –

組合僞元素和僞類將不起作用

回答

相關問題