擬似要素と擬似クラスを組み合わせても動作しません。

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?

のことで答えによると、 2番目の疑似セレクタの前に2つのコロンを追加しようとしました。

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

これら3つの例は悲しいことですが、

：nth-​​child（2）または:: nth-child（2）を削除し、with：withだけを保持すると、CSSコマンド#breadcrumbs li:before {content: "> "}は正常に動作することに注意してください。

注：

私はこのDrupal 8 themeを（あなたはCSSを調べるために8.x.x版をダウンロードできる）を使用します。個人的に私のカスタムCSSをカスタムファイルに追加します。最後はlibraries.ymlファイルによって決定されたCSS階層にあります。しかし

、これらは私がコアCSSファイルの中に発見のみ関連するコード片-かもしれませんが、次のとおりです。

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

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

Answer 1

CSSコード#breadcrumbs li:nth-child(2)::before {content: ">"}は大丈夫だったようだ：

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

私はあなたが読んで、この関連の質問をCSSでbeforeのための2つのコロンが必要と考えてい

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

へ：この変更を行ってくださいこの問題はhtml.twigテンプレートファイルでidクラスの衝突が原因でした。

{% 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.html.twigに変更された解決は何

.breadcrumbクラス、または#system-breadcrumb IDです。

Answer 2

これは可能であるが、このデモ

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

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

をご覧ください

あなたはあなたのCSSに誤字があると思います。 Why are there two colons here? span::before