如何在父母中选择last-child或first-child元素？ （css - html）

Question

我选择last-child元素时遇到问题！
我为navbar创建了这样的页面：

<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;
}

我想为最后一个孩子（Sing out）添加BG for Ul，但是当看到子项时，那个得到背景的最后一个孩子就像父母一样。但我不想得到颜色。我怎么能解决这个问题？ 我不想使用任何类或ID或JavaScript！ 我有什么办法......？

TnX

Answer 1

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

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

Answer 2

注释行中提到的更改

<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

Answer 3

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

li a {
    padding: 10px 15px;
}

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

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

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

ul li ul {
    display: none;
    /*background: #eee;*/
    position: absolute;
    top: 39px;
    left: 0;
}