Question

我在这里有一个非常好的菜单：

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
            <ul class="nav">
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

现在问题是，我想要一个右箭头图像，如果还有另一个子菜单，则向右对齐。放在里面并不健康。我不想创造任何可以复制的行为。所以，

<li><a href="/something"><div float left><div float right></a></li>

不是一个好方法。

Answer 1

使用 CSS Child Selector ：

ul.root > li > a { /* css declarations */ }

这只会将规则应用于根ul元素的直接后代。

<强>插图：

<ul class="root">
    <li>
        <a href="#"><!-- MATCH --></a>
    </li>
    <li>
        <a href="#"><!-- MATCH --></a>
        <ul>
            <li>
                <a href="#"><!-- NO MATCH --></a>
            </li>
        </ul>
    </li>
</ul>

如何在<a>?</a>内对齐某些内容

1 个答案: