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

Question

我是 css n jquery 的新手，我正在使用 jquery 选项卡作为我的菜单 我想在其中为每个选定选项卡添加三 Angular 形的网站。我能 在菜单中实现三 Angular 形效果，但我仍然感到困惑 selector combinator( >) 我用的是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 ，我没有得到相同的 影响。包含 li 有什么区别我无法得到 三 Angular 形状。只是好奇。抱歉，如果这个问题很愚蠢...谢谢。

Answer 1

最有可能的是，.ui-tabs-active 是将存在于 一个 li 元素上的类。当你这样做时:

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

这部分:

.ui-tabs-active li

正在寻找 li 元素，该元素包含在 within 类为 ui-tabs-active 的元素中。这不存在，因为 .ui-tabs-active 是 li。相反，您可以这样做:

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

这样，li.ui-tabs-active 就是一个 li 元素，它有类 ui-tabs-活跃。