html - 最后一个子选择器不工作

Question

我对最后一个 child 有点意见。我有一个下拉导航，需要使最后一个下拉菜单与其他下拉菜单对齐，因为文本被截断了。

我的普通下拉菜单的 CSS 如下所示:

.mainnav ul > li > ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: -20px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s;

当我调整最后一个下拉菜单时，我尝试使用:

.mainnav ul > li > ul:last-child{
  padding: 0;
  position: absolute;
  top: 43px;
  left: -120px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s; 
}

但是当我把它放进去时，它会影响所有的下拉菜单。你可以在这里看到测试站点: http://xeroproject.com/runa_tea/

我正在尝试调整 IMPACT 下拉菜单。

感谢您的帮助。

Answer 1

.mainnav ul > li > ul:last-child选择所有 <ul>那是与选择器匹配的元素的最后一个子元素。

针对 <ul>最后<li>

使用

.mainnav ul > li:last-child > ul{

代替

.mainnav ul > li > ul:last-child{