Question

一个特定的嵌套列表，父级div id和列表项具有不同的类...我无法正确分配背景颜色。

例如：

<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
        <ul class="parent-sidebar-menu">
            <li class="current_page_ancestor">
                <a href="http://somesite/about-us/">About Us</a>
                <ul class="child-sidebar-menu">
                    <li class="page_item">
                       <a href="http://somesite/about-us/welcome/">Welcome</a>
                    </li>
                    <li class="page_item current_page_item">
                       <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a>
                    </li>
                </ul>
            </li>
        </ul>
    </aside>
</div>

您将使用哪些CSS代码来更改属于类current_page_ancestor，page_item和current_page_item的每个项目的背景颜色（每个项目应具有不同的颜色）

Answer 1

对于第一个a，您可以使用>或直接子选择器，而对于其他人，您只需选择parentClass - ＆gt; a

.current_page_ancestor > a {
  color: black;
}
.page_item a {
  color: green;
}
.page_item.current_page_item a {
  color: red;
}

<div id="sidebar" class="widget-area">
  <div class="theiaStickySidebar">
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
      <ul class="parent-sidebar-menu">
        <li class="current_page_ancestor">
          <a href="http://somesite/about-us/">About Us</a>
          <ul class="child-sidebar-menu">
            <li class="page_item">
              <a href="http://somesite/about-us/welcome/">Welcome</a>
            </li>
            <li class="page_item current_page_item">
              <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a>
            </li>
          </ul>
        </li>
      </ul>
    </aside>
  </div>

Answer 2

＆＃13;

ul {
  /* reset lists */
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li a {
  text-decoration: none;
}



/* specific styles */

.page_item a {
  display: block;
  padding: 10px 20px;
  border-bottom: 1px solid white;
  color: white;
  background-color: #333;
}
.page_item a:hover,
.page_item.current_page_item a{
  background-color: #666;
}

.parent-sidebar-menu {
  width: 200px;
}

.current_page_ancestor > a {
  display: block;
  padding: 10px 20px;
  color: green;
  background-color: #fff;
  text-align: right;
}

.current_page_ancestor > a:before {
  content: "Back to >> ";
  font-size: 14px;
  color: #000;
  margin-right: 10px;
}

＆＃13;

<div id="sidebar" class="widget-area">
  <div class="theiaStickySidebar">
    <aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
      <ul class="parent-sidebar-menu">
        <li class="current_page_ancestor">
          <a href="http://somesite/about-us/">About Us</a>
          <ul class="child-sidebar-menu">
            <li class="page_item">
              <a href="http://somesite/about-us/welcome/">Welcome</a>
            </li>
            <li class="page_item current_page_item">
              <a href="http://somesite/about-us/mission-and-philosophy/">Mission and philosophy</a>
            </li>
          </ul>
        </li>
      </ul>
    </aside>
  </div>
</div> <!-- #sidebar -->

＆＃13;

这有点不同之处在于，我不是使用每个类来做不同的事情，而是使用类似的东西来做同样的事情并根据状态变化进行更改。祖先页面的处理方式与子侧边栏菜单不同。希望这会有所帮助。

嵌套列出CSS覆盖样式（#id +类）

2 个答案: