4

ここで見ることができる素敵なスクリプトを見つけました

http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

ドロップダウンの上部に少し^があるのを見ました。cssで私はこれを見つけることができました：

#colorNav li ul li:first-child:before{ 
    content:none;
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

これがどのように機能しているかを理解できないのは私だけです。それは国境と関係がありますか？

4

3 に答える 3

6

このCSSは、次のマークアップで動作します（簡単にするために縮小されています）。

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Back to the tutorial</a></li>
                <li><a href="#">Get help</a></li>
            </ul>
        </li>
        <li class="red">
            <a href="#" class="icon-cogs"></a>
            <ul>
                <li><a href="#">Payment</a></li>
                <li><a href="#">Notifications</a></li>
            </ul>
        </li>
    </ul>
</nav>

セレクターは、親内の最初の要素でもある:before最も内側の要素の疑似要素をターゲットにします。li

#colorNav li ul li:first-child:before

ここのコードにはありませんが、元のチュートリアルには次のコメントがあります。

/* the pointer tip */

この特定のルールセットは、ドロップダウンメニューの上部に表示され、関連するブロックを指す小さな三角形を作成するためのものです（下の図、赤い円で強調されています）。

ここに画像の説明を入力してください

次に、この三角形を作成するためのスタイルに従います。

content: none;                  /* Pseudo-element has no content    */
position: absolute;             /* It's positioned absolutely       */
width: 1px;                     /* It has a width of 1 pixel        */
height: 1px;                    /* And a height of 1 pixel too      */
border: 5px solid transparent;  /* Applies initial border style     */
border-bottom-color: #313131;   /* Overrides bottom border color    */
left: 50%;                      /* Moves it half-way from the left  */
top: -10px;                     /* And 10px up above the element    */
margin-left: -5px;              /* Margin, half of width, to center */

最終結果は、CSSで純粋に境界線を使用して作成された三角形です。

于 2012-12-27T03:12:34.460 に答える
2

#colorNav li ul li:first-childwithの前面に偽の領域を作成し、content:'';他のcssスタイルでその領域を管理します。

于 2012-12-27T03:00:15.783 に答える
2 
#colorNav li ul li:first-child:before { ... }

：first-childセレクターは、指定されたセレクターがその親の最初の子である場合にのみ、それを選択するために使用されます。

content:'';

contentプロパティは、生成されたコンテンツを挿入するために、：beforeおよび：after疑似要素とともに使用されます。

これがお役に立てば幸いです。

于 2012-12-27T03:03:16.233 に答える