次または兄弟要素をターゲットにしようとしています

CSSでターゲットを設定しようとしているか、メニュー内の次の要素をクエリしてみてください この構造があるとしましょう

私の目標は、現在のアクティブなliの隣にあるすべてのiまたは要素にアニメーションを表示することです。私の目標は色を変更すること、または要素であることをユーザーが理解できるように点滅効果を追加することです。 CSSで+、〜、jqueryで.next()、nextAll()などを試してみました。

edit: The examples given below work well with the simple structure shown here, thank you very much for your help.But with the bootstrap 4 tabs, the active class is in the element so the structure becomes

そして、この新しい構造では、色を変えたりアニメートしたりすることができなくても、アクティブなクラスの後になります。(2番目のli)

0

6 答え

たぶんあなたは間違った方法でセレクタを使いますか?

Here is an actual example

使用されるCSSは次のとおりです。

// Targets the next one to active
li.active + li a  {
}

// Targets next one and all after that, after active
li.active ~ li a {

}
1
追加された
どうもありがとうございます、はい、私は間違っていると思います。私はあなたのコードを試してみます
追加された 著者 blogob,

私はあなたがこれを探していると思います:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li.active ~ li > a {
color:red;
}
li.active ~ li > a >i {
color:green;
}
</div> </div>

または多分これ:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li.active + li > a {
color:red;
}
li.active + li > a >i {
color:green;
}
</div> </div>

1
追加された
どうもありがとうございました
追加された 著者 blogob,

私はあなたがこれを探していると思います:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li.active ~ li > a {
color:red;
}
li.active ~ li > a >i {
color:green;
}
</div> </div>

または多分これ:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li.active + li > a {
color:red;
}
li.active + li > a >i {
color:green;
}
</div> </div>

1
追加された
どうもありがとうございました
追加された 著者 blogob,

クラス "active"を持つliの子要素をターゲットにしたいと思います。

あなたはこれのようにそれをすることができます

li.active a {
    /*your style goes here*/
}
li.active i {
    /*your style goes here*/
}
1
追加された
どうもありがとうございました!私が試してみます
追加された 著者 blogob,

クラス "active"を持つliの子要素をターゲットにしたいと思います。

あなたはこれのようにそれをすることができます

li.active a {
    /*your style goes here*/
}
li.active i {
    /*your style goes here*/
}
1
追加された
どうもありがとうございました!私が試してみます
追加された 著者 blogob,

From CSS-tricks.com:

隣接する兄弟結合子セレクタを使用すると、特定の別の要素の直後にある要素を選択できます。

p + p { font-size: smaller; }
// Selects all paragraphs that follow another paragraph
#title + ul { margin-top: 0; }
// Selects an unordered list that directly follows the element with ID title
0
追加された
どうもありがとうございました。
追加された 著者 blogob,