0

我有选择last-child元素的问题！
我为导航栏创建了类似这样的页面：

<nav>
    <ul>
        <li><a href="#">list numeber 1</a></li>
        <li><a href="#">list numeber 2</a>
            <ul>
                <li><a href="#">sub list item</a></li>
                <li><a href="#">sub list item</a></li>
                <li><a href="#">sub list item</a></li>
            </ul>
        </li>
        <li><a href="#">list numeber 3</a></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</nav>

使用 css 是这样的：

nav {
    background: yellow;
}

ul {
    list-style: none;
}
li {
    padding: 10px 15px; 
    display: inline-block;
    position: relative;
}
ul li:last-child {
    float: right;
    background: #ddd;
}
ul li ul {
    display: none;
    position: absolute;
    background: #eee;
    top: 39px;
    left: 0;
}
ul li:hover ul {
    display: block;
}
ul li ul li {
    display: block;
}

我想为 Ul 添加最后一个子项的 BG（唱出），但是当看到子项时，该子项的最后一个子项会像父项一样获得背景。但我不想得到颜色。我该如何解决...？我不想使用任何类或 id 或 JavaScript！我有什么办法...？

在此处输入图像描述

TNX

4

3 回答 3

1

更改ul li:last-child为nav > ul > li:last-child。

该>字符是直接后代选择器。

于 2013-10-19T07:05:10.957 回答
1

注释行中提到的更改

<nav>
   <ul>
      <li><a href="#">list numeber 1</a></li>
      <li><a href="#">list numeber 2</a>
          <ul id="menu">// changes-here id is mentioned.
            <li><a href="#">sub list item</a></li>
            <li><a href="#">sub list item</a></li>
            <li><a href="#">sub list item</a></li>
        </ul>
      </li>
     <li><a href="#">list numeber 3</a></li>
     <li><a href="#">Sign Out</a></li>
  </ul>
</nav>

注释行中提到的更改

nav {
  background: yellow;
}

ul {
  list-style: none;
}
li {
  padding: 10px 15px; 
  display: inline-block;
  position: relative;
}
#menu li:last-child {// changes-here i refer the id of that menu
  float: right;
  background:green;
}
ul li ul {
  display: none;
  position: absolute;
  background: #eee;
  top: 39px;
  left: 0;
}
ul li:hover ul {
  display: block;
}
ul li ul li {
  display: block;
}

演示：JSFIDDLE

于 2013-10-19T07:19:08.433 回答
0

首先，您在 li 元素上的填充将在不同的浏览器上产生不可预知的结果。我建议在 Firefox 或 Chrome 中编码。相反，将填充放在 a 标签上。

li a {
    padding: 10px 15px;
}

li {
    /*padding: 10px 15px; */
    display: inline-block;
    position: relative;
}

其次，您可以使用后代选择器来指定 CSS 的深度，并覆盖不太具体的选择器。

ul li ul, ul li:last-child {
    background: #eee;
}

ul li ul {
    display: none;
    /*background: #eee;*/
    position: absolute;
    top: 39px;
    left: 0;
}
于 2013-10-19T07:20:55.290 回答