Question

我有以下规则，其目标是0级最后一个孩子ul。由于某些奇怪的原因，以下规则也将样式应用于其他元素。我＆＃39;我也附上了截图。

#primary-menu ul li:last-child ul{
    left: -139%;
}

如下所示，上述样式也适用于Our Memebers儿童ul。 Talk to Us孩子们的造型工作正常。

HTML

<nav class="navbar navbar-default" id="primary-menu">
  <div class="container">
    <div class="row">
      <div class="collapse navbar-collapse">
        <ul id="menu-primary-menu" class="nav nav-justified">
          <li><a href="#">Home</a></li>
          <li><a href="#">Our Members</a>
            <ul class="sub-menu">
              <li><a href="#">Member Countries</a>
                <ul class="sub-menu">
                  <li><a href="#">American Samoa</a></li>
                  ....
                </ul>
              </li>
              <li><a href="#">How to Become a member</a>
                <ul class="sub-menu">
                  <li><a href="#">Apply</a></li>
                  ....
                </ul>
              </li>
              <li><a href="#">Interim Members</a>
                <ul class="sub-menu">
                  <li><a href="#">Bouganville</a></li>
                  ....
                </ul>
              </li>
              <li><a href="#">Regional NGO’s</a></li>
              <li><a href="#">Observers</a>
                <ul class="sub-menu">
                  <li><a href="#">Hawaii</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">About Us</a>
            <ul class="sub-menu">
              <li><a href="#">Our Donors</a></li>
              ....
            </ul>
          </li>
          <li><a href="#">Talk to Us</a>
            <ul class="sub-menu">
              <li><a href="#">Our Locations</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

我在样式规则中做错了什么？

Answer 1

尝试：

#primary-menu > ul > li:last-child ul {
  left: -139%;
}

Answer 2

看起来您可能需要稍微提高一点：

#primary-menu #menu-primary-menu > li:last-child ul {
    left: -139%;
}

这是fiddle。我更改了背景颜色，以便您可以看到差异（因为我们错过了您的css文件的其余部分）。

样式规则适用于错误的元素

2 个答案: