关于>的困惑选择器及其在css中的用法

时间:2013-11-17 04:08:29

标签: css jquery-ui css-selectors

我是css n jquery的新手,我正在使用jquery标签来获取我的菜单 我想在每个选定标签上添加三角形的网站。我能够 在菜单中实现三角形效果,但我仍然感到困惑 选择器组合器(>)我用o。更清楚。考虑以下代码     css:

 #tabs .ui-tabs-active a > .arrow-down
 {

 display: block !important;
 top:40.5px;
 margin:-15px !important;
 left:45px; 
 }    #tabs .ui-tabs-active a > .arrow-down-border    {    z-index: 100000; 
 display: block !important;    top:42px;   
 margin:-15px !important;    left:45px;    }

HTML:

<div id="tabs" style="border:none;" >
<ul style="background:none;border:none; width:30%; ">
<li>

<a href="#tabs-1">Games 
<div class="arrow-down"> </div>
<div class="arrow-down-border"> </div>
</a> </li>

<li><a href="#tabs-2">Activities
<div class="arrow-down"> </div>
<div class="arrow-down-border"> </div>
</a></li> 
</ul>
</div>

它工作得非常好。但是我想知道当我使用#tabs .ui-tabs- active li a > .arrow-down而不是#tabs .ui-tabs-active a > .arrow-down时,我没有得到相同的结果 影响。李的包含有什么不同,使得我无法得到 三角形。只是好奇。对不起,如果这个问题很愚蠢......谢谢。

1 个答案:

答案 0 :(得分:1)

最有可能的是,.ui-tabs-active li元素上的类。当你这样做时:

#tabs .ui-tabs-active li a > .arrow-down

这部分:

.ui-tabs-active li

正在寻找一个li元素,其中元素中包含ui-tabs-active。这不存在,因为.ui-tabs-active li。相反,你可以这样做:

#tabs li.ui-tabs-active a > .arrow-down

通过这种方式,li.ui-tabs-activeli元素, ui-tabs-active