Question

我试图在我的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;
}

Answer 1

你的问题是：

#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 {

或者：

{{1}}

Answer 2

问题是#sidebar旁边的>。这表明侧边栏标签内容是侧边栏div下的第一个孩子。删除它，你应该是好的

Answer 3

试试这个：

#sidebar  div.sidebar-tab-content ul {

}

Answer 4

删除课程中的空格并用短划线替换它，使其现在看起来像这样，然后在你的css中做同样的事情

class="sidebar-tab-content-sidebar-tab-content-t1"

试图在我的CSS中定位一个类

4 个答案: