来自 CSS 和 jQuery 的意外结果

我想做的是在每个第一级锚标签"这是主菜单而不是子菜单 #menuCont"之后放置"|"的内容，但排除最后一个孩子。尝试使用 CSS 执行此操作，然后我得到了意想不到的结果，然后尝试使用 jQuery，我得到了另一个意想不到的结果。

主页菜单 HTML

        <div id="menuCont">
            <ul>
                <li>
                    <a href="">About</a>
                    <ul>
                        <li><a href="root/vision.html">Vision</a></li>
                        <li><a href="">Mission</a></li>
                        <li><a href="">Values</a></li>
                    </ul>
                </li>
                <li><a href="">News</a></li>
                <li><a href="root/gallery.html">Gallery</a></li>
                <li><a href="">Activities</a></li>
                <li><a href="">Facilities</a></li>
                <li><a href="">Students</a></li>
                <li><a href="">Staff</a></li>
                <li><a href="">Contact info</a></li>
            </ul>
        </div>

另一个页面菜单 HTML

<div id="menuCont">
    <ul>
        <li><a href="">Home</a></li>
        <li>
            <a href="">Static pages</a>
            <ul>
                    <li><a href="">Homepage</a></li>
                    <li><a href="">Vision</a></li>
                    <li><a href="">Mission</a></li>
                    <li><a href="">Values</a></li>
                    <li><a href="">Contact info</a></li>
            </ul>
        </li>
        <li>
            <a href="root/gallery.html">Dynamic pages</a>
            <ul>
                    <li><a href="">News</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Videos</a></li>
            </ul>
        </li>
        <li>
            <a href="">Administration</a>
            <ul>
                    <li><a href="">Create accounts</a></li>
                    <li><a href="">Edit accounts</a></li>
                    <li><a href="">Assign Students</a></li>
                    <li><a href="">Assign teachers</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS 控件 CSS approch

#menuCont ul li a:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
#menuCont ul li a:last-child:after {content:"" !important;}

CSS Approch for jQuery

#menuCont ul li a.conAfter:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}

j查询代码

$("#menuCont").children().children().children("a:not(:last-child)").addClass("conAfter")

反映 CSS 应用程序的意外结果：

"主页"

从 Ie = 它只是选择所有锚标签并将内容添加到其中，完全忽略我要求从最后一个孩子中删除内容的地方。从 ff，gc，sf，Op = 我从他们那里得到相同的结果，即他们只选择第一个孩子并将内容添加到其中。

"另一页"

从 Ie = 它只是选择所有锚标签并将内容添加到其中，完全忽略我要求从最后一个孩子中删除内容的地方。-这是不同的-从ff，gc，sf，Op =我从所有这些元素中得到相同的结果，他们将内容添加到除第一个锚标记之外的所有元素中。

反映 jQuery 应用程序的意外结果：

"主页"

从 Ie，Ff，Gc，Sf，Op = 我从所有这些中得到相同的结果，即他们只选择第一个孩子并将内容添加到其中。

"另一页"

从 Ie，ff，Gc，Sf，Op = 我从所有这些元素中得到相同的结果，他们将内容添加到除第一个锚标签之外的所有元素中。

谢谢大家。

多亏了@charlietfl我才设法达到了中立状态。

我将强调解决方案，以防有人带着同样的问题到达该帖子。

为了只获得第一级子级，我需要使用 CSS 子选择器">"从祖先到父级再到子级开始，如果你明白我的意思，这将给我一个准确而具体的选择。

另一个问题我没有注意到我正在调用锚标签的最后一个子标签，而不是调用锚标签本身<>，通过调用

#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}