1

我试图在我的 css 中定位一个类以沿侧面移动,使其看起来像侧面导航。我似乎无法定位它,我正在用边框测试它并移动它,但似乎无法得到它。任何帮助,将不胜感激。

这是html

<div class="sidebarContainer">
<div id="sidebar" class="tabbed-sidebar">
    <!-- The tabs -->
    <ul class="sidebar-tabs">
        <li id="t1" class="sidebar-tab t1"><a class="sidebar-tab t1" title="Tab 1">Tab 1</a></li>
        <li id="t2" class="sidebar-tab t2"><a class="sidebar-tab t2" title="Tab 2">Tab 2</a></li>
        <li id="t3" class="sidebar-tab t3"><a class="sidebar-tab t3" title="Tab 3">Tab 3</a></li>
        <li id="t4" class="sidebar-tab t4"><a class="sidebar-tab t4" title="Tab 4">Tab 4</a></li>
        </ul>
            <!-- tab 1 -->
            <div class="sidebar-tab-content sidebar-tab-content-t1"> <--This is what i am trying to target to go along the side of.... the sidebar-tabs                    
                <ul>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>

  <!-- tab 2 -->
  <div class="sidebar-tab-content sidebar-tab-content-t2">
      <p>what sup.</p>
  </div>

这是CSS

#sidebar >  .sidebar-tab-content sidebar-tab-content-t1 ul {
    position:relative;
    border:5px solid red;
    left:200px;
}
4

4 回答 4

4

你的问题是这样的:

#sidebar >  .sidebar-tab-content sidebar-tab-content-t1 ul {

这假设.sidebar-tab-content#sidebar(因为>)的直接子代,但事实并非如此,而且那sidebar-tab-content-t1是一个标签(而不是同一元素上的类,因为它缺少.)并且其后代.sidebar-tab-content也是不正确的,因此请尝试更改您的选择器至:

#sidebar .sidebar-tab-content.sidebar-tab-content-t1 ul {

或者:

#sidebar .sidebar-tab-content.sidebar-tab-content-t1 > ul {
于 2013-06-28T17:45:27.877 回答
0

问题出>在#sidebar 旁边。这表明 sidebar-tab-content 是侧边栏 div 下的第一个子项。删除它,你应该会很好

于 2013-06-28T17:43:37.553 回答
0

尝试这个:

#sidebar  div.sidebar-tab-content ul {

}
于 2013-06-28T17:44:42.813 回答
-2

删除类中的空格并将其替换为破折号,使其现在看起来像这样,然后在您的 css 中执行相同的操作

class="sidebar-tab-content-sidebar-tab-content-t1"
于 2013-06-28T17:46:34.963 回答