Question

你能帮我解决这个ul中最后一个链接的样式吗。

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a {
    vertical-align: middle !important;
    padding: 0 35px;
    border-right: 1px #dadada solid;
}
<div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation">
     <div class=" noindex ms-core-listMenu-horizontalBox">
          <ul class="root ms-core-listMenu-root static">
               <li class="static">
                    <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a>
                    <ul class="static">
                         <li class="static selected">
                              <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a>
                         </li>
                    </ul>
               </li>
        </ul>
</div>

我尝试使用

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a:nth-last-child(1) {
    border: 0 ;
}

但它设置了边框：0到所有链接。我怎么能只为最后一个做这个？

Answer 1

您需要使用last-child上的li代替nth-last-child()上的a。

＆＃13;

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a {
  vertical-align: middle !important;
  padding: 0 35px;
  border-right: 1px #dadada solid;
}
#DeltaTopNavigation ul.root.ms-core-listMenu-root.static li ul.static li:last-child a {
  border: 0;
}

＆＃13;

<div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation">
  <div class=" noindex ms-core-listMenu-horizontalBox">
    <ul class="root ms-core-listMenu-root static">
      <li class="static">
        <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a>
        <ul class="static">
          <li class="static selected">
            <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a>
          </li>
          <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a>
          </li>
          <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a>
          </li>
          <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

＆＃13;

Answer 2

这应该有效：

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static li:last-child a {
    border: 0;
 }

您需要将：last-child添加到li中，因为它目前正在选择所有li中的最后一个标记。因此将其设置为li将意味着它在最后一个li中选择一个标记。

这是link for more info

在ul中使用nth-last-child css

2 个答案: