这个下拉菜单如何显示 ^ 符号？

Question

我找到了一个不错的脚本，你可以在这里看到它：

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;
}

我只是不太理解这是如何工作的，它是否与边框有关呢？

- Ivo

Answer 1

这个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>

选择器针对的是内部最深层的 li 元素上的 :before 伪元素，这些元素也是其父元素中的第一个元素：

#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中的边框创建的三角形。

- Sampson

Answer 2

#colorNav li ul li:first-child:before { ... }

:first-child选择器用于仅选择指定选择器，但仅当它是其父元素的第一个子元素时。

content:'';

内容属性用于:before和:after伪元素，以插入生成的内容。

希望这能帮到你？

- Blazer

Answer 3

它使用content:'';在#colorNav li ul li:first-child前创建一个虚拟区域，并通过其他CSS样式管理该区域。

- burak emre