javascript - 来自 CSS 和 jQuery 的意外结果

Question

我想做的是把“|”的内容在每个第一级 anchor 标记“这是主菜单而不是子菜单”之后跟随 #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 Controller CSS 方法

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

jQuery 的 CSS 方法

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

jQuery 代码

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

反射(reflect) CSS 方法的意外结果:

“主页”

从 Ie = 它只选择所有 anchor 标记并将内容添加到它们，完全忽略我要求从最后一个子项中删除内容的地方。从 Ff,Gc,Sf,Op = 我从他们那里得到相同的结果，即他们只选择第一个 child 并向其添加内容。

“其他页面”

从 Ie = 它只选择所有 anchor 标记并将内容添加到它们，完全忽略我要求从最后一个子项中删除内容的地方。- 这是不同的 - From Ff,Gc,Sf,Op = 我从他们那里得到的都是一样的，他们将内容添加到除第一个 anchor 标记之外的所有元素。

反射(reflect) jQuery 方法的意外结果:

“主页”

从 Ie,Ff,Gc,Sf,Op = 我从他们那里得到相同的结果，即他们只选择第一个 child 并向其添加内容。

“其他页面”

从 Ie,Ff,Gc,Sf,Op = 我从他们那里得到相同的结果，他们将内容添加到除第一个 anchor 标记之外的所有元素。

谢谢大家。

---

感谢@charlietfl，我设法达到了中立状态。

我会强调解决方案，以防有人遇到同样的问题。

为了仅获得第一级子级，我需要使用 CSS 子级选择器“>”从祖先到父级再到子级，如果您明白我的意思，那将给我一个准确和具体的选择。

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

的最后一个子标签是a，我得到了我想要的。

然而，IE8 无法理解该行，但所有其他浏览器都能很好地理解它。祝大家好运!

Answer 1

如果使用>将仅表示 child

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

另请注意寻找 <a>最后一个 child 的 <li>

DEMO