来自CSS和jQuery的意外结果

时间:2013-11-16 01:36:25

标签: javascript jquery html css

我要做的是放置“|”的内容在每个第一级锚标记“这是主菜单而不是子菜单”后面跟#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 Controlers     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;}

jQuery的CSS Approch

#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")

意外结果反映了CSS approch:

“主页”

从Ie =它只是选择所有锚标签并将内容添加到它们中并完全忽略我要求从上一个孩子中删除内容的地方。 从Ff,Gc,Sf,Op = I得到所有这些,他们只选择第一个孩子并将内容添加到其中。

“另一页”

从Ie =它只是选择所有锚标签并将内容添加到它们中并完全忽略我要求从上一个孩子中删除内容的地方。 - 这是不同的 - 从Ff,Gc,Sf,Op = I得到所有这些,他们将内容添加到除第一个锚标记之外的所有元素。

意外结果反映了jQuery approch:

“主页”

从Ie,Ff,Gc,Sf,Op =我从他们所有人那里得到相同的东西,他们只选择第一个孩子并将内容添加到其中。

“另一页”

从Ie,Ff,Gc,Sf,Op =我得到的都是相同的,他们将内容添加到除第一个锚标签之外的所有元素。

谢谢大家。


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

如果有人遇到同样的问题,我会强调解决方案。

要获得第一级别的孩子,我需要使用CSS子选择器“&gt;”如果你理解我的意思,就从祖先到父母的孩子开始,这将给我一个精确而具体的选择。

另一个问题我没注意到我正在调用锚标记的最后一个子节点而不是调用锚标记本身&lt; a&gt;,通过调用&lt;的最后一个子节点li>这是一个,我得到了我想要的东西。

然而,IE8并不理解这一行,但所有其他浏览器都让它变得安静。 祝你好运!

2 个答案:

答案 0 :(得分:0)

我看到的情况是,如果你有白色背景,颜色会使链接隐藏,但下划线需要文字:decoration:none;

这是你在追求什么?

http://jsfiddle.net/MV2dn/2/

答案 1 :(得分:0)

如果使用>仅表示儿童

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

另请注意查找上一个孩子<a>的{​​{1}}

DEMO