CSS セレクター:nth-child(n) および:nth-last-of-type(number)_html/css_WEB-ITnose

この期間中にいくつかのことをしていて、CSS セレクターに関して遭遇した問題を整理しました。

以下に示すようにサイドバー効果を完成させる必要があります:

一見すると、タグリスト、ポップアップボックス、完了! とてもシンプルに見えます。

次に、次のコードを書きました:

<ul class="tag radius-8">    //标签    <li class="a"> code </li>    <li class="a"> code </li>    <li class="a"> code </li>    <li class="a"> code </li>    <li class="a"> code </li>        //弹框    <div class="secondary-tag-container radius-8" id="second-tag-div1">        <!-- 弹出层内容区域 -->        <div class="secondary-content radius-8" id="secondary-content1">                 <!-- 二级标签 -->                 <div class="second-tag">                       <li class="b"> code </li>                       <li class="b"> code </li>                       <li class="b"> code </li>                       <li class="b"> code </li>                       <li class="b"> code </li>                       <li class="b"> code </li>                 </div>                                                    <!-- 跳转按钮container -->                 <div class="skip-btn-container">                      <!-- 跳转按钮 -->                      <a class="skip-btn">Done</a>                 </div>         </div>                              </div> </ul>

基本的なスタイルは OK で、次のような効果を追加します:hover:

.primary-tag:hover {    background-color: #F5F5F5;}

待って、この時点で何かを発見したようです:

最初で最後li タグ ホバーすると背景が溢れます、大丈夫、とても簡単です:

.tag li:first-child {    border-top-left-radius: 8px;    border-top-right-radius: 8px;}.tag li:last-child {    border-bottom-left-radius: 8px;    border-bottom-right-radius: 8px;}

え？何が起こっているのか、first-child は効果的ですが、last-child は効果的ではありません:

これら 2 つのセレクターについて注意深く考えると、次のことがわかりました:

• li:first-child は、親要素 Element

  に一致する最初の li です。

• li:last-child は親要素と一致する最後の li 要素です

ポップアップ ボックスにも li 要素があるため、last-child 属性は親要素の最後の li と一致することがわかります。 HTML を変更せずにポップアップ ボックスを少し変更します:

• li.a:first-child

• li.a:last-child

今回はこれを押しました。 F5 さん、まったく同じです、混乱しています~~~

情報を注意深く確認しました:

• li.a:first-child は、クラス a の親要素と一致し、最初です。各 li

• li.a:last-child は、クラス a の親要素と一致し、それが最後の li

になります。つまり、最後の li がクラス a を持つ場合、last-child が有効になります。それ以外の場合は有効になりません (ここでの最後の li は、一致するポップアップ ボックス内の li のままです。クラス a がないため、セレクターは無効で、要素は選択されません)。

「CSS だけでは実現できない。jQuery を介して行う必要がある...多くの理由を省略している」(html 構造のタグを変更しないことに基づく) と多くの人が言いますが、本当にそのような単純な効果でしょうか? CSSで出来ないのでしょうか？

CSS を通じてそれを実現できない場合は、CSS 属性セレクターを完全に理解していない可能性があります。苦労の甲斐あって、:nth-child(n) セレクターを見つけました。

:nth-child(n) の定義と使用法

:nth-child(n) セレクターは、要素の種類に関係なく、最初の子要素 ​​(最初の子要素) から数えて、親要素に属する N 番目の子要素と一致します。子要素の添字は 1 です。JS (0) と混同しないでください。

n には、数値、キーワード、または数式を指定できます。

例: li:nth-child(2) は、ul

  <ul>    <li><a></a></li>    <li><a></a></li>    <li><p><p></li>  </ul> 

の下の 2 番目の li として指定されています

したがって、次の設定に従うことで、必要な効果を実現できます:

.a:nth-child(1) {    border-top-left-radius: 8px;    //匹配第1个class为a的元素    border-top-right-radius: 8px;}.a:nth-child(5) {    border-bottom-left-radius: 8px;  //匹配第5个class为a的元素    border-bottom-right-radius: 8px;}

:nth-child(n)詳細 複数の設定:

奇数と偶数は、添字が奇数または偶数である子要素と一致するために使用できるキーワードです。

ここでは、最後の子要素から数えて奇数番目の a 要素に 2 つの異なる背景色を指定します:

.a:nth-child(Odd) {    color: #45E0B1;            //匹配class为a的奇数元素}

偶数:

.a:nth-child(even) {    color: #45E0B1;            //匹配class为a的偶数元素}

実は、この効果を達成できるもう 1 つの背景色があります。上に示したように、つまり、nth-last-of-type(n) セレクターです。

:nth-last-of-type(number) 定義と使用法

:nth-last-of-type(n) セレクターは、親要素の特定の型の N 番目の子要素であるすべての要素と一致します。 the end 子要素がカウントを開始します (最初の子要素のインデックスは 1 です。JS の 0 と混同しないでください)。

n には、数値、キーワード、または数式を指定できます。

:nth-last-of-type(number) その他の設定

奇数と偶数は、添字が奇数または偶数である子要素と一致するために使用できるキーワードです。

ここでは、最後の子要素から数えて奇数番号の a 要素に 2 つの異なる背景色を指定します:

.a:nth-last-of-type(Odd) {    color: #45E0B1;            //匹配class为a的奇数元素}

偶数:

.a:nth-last-of-type(even) {    color: #45E0B1;            //匹配class为a的偶数元素}

テストしてみる:

.a:nth-last-of-type(5) {    color: #45E0B1;            //匹配class为a的从后往前数的第5个元素（也就是第一个）}.a:nth-last-of-type(1) {    color: #26D7D7;            //匹配class为a的从后往前数的第1个元素（也就是最后一个）}

最終的な効果:

実際、多くの場合、解決策や簡単な方法がないのではなく、私たちがそれを知らないだけです。つまり、十分な知識がなく、自分自身を豊かにするために学ぶ必要があることを意味します。