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-child它在with的前面创建一个假区域，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 回答