Question

<div id="wrapper">
  <ul>
    <li id="patches">Patches</li>
    <ul id="patches_dropdown">
      <li><a href="new_patch.php">New</a>
      </li>
      <li><a href="#">Edit</a>
      </li>
      <li><a href="#">Delete</a>
      </li>
    </ul>
    <br/>
    <br/>
    <li><a href="logout.php">Logout</a>
    </li>
  </ul>
</div>

我正试图以某种方式退出目标，但是让自己感到困惑与li非常接近：最后一个孩子a：悬停但是我的目标也是前一个无序列表的最后一个。

ul:first-child li:last-child a:hover {
  color: red;
}

Answer 1

使用以下选择器

#wrapper > ul > li:last-child a {
        color:red;
}

<强> FIDDLE

＆＃13;

#wrapper > ul > li:last-child a {
  color: red;
}

＆＃13;

<div id="wrapper">
  <ul>
    <li id="patches">Patches</li>
    <ul id="patches_dropdown">
      <li><a href="new_patch.php">New</a>
      </li>
      <li><a href="#">Edit</a>
      </li>
      <li><a href="#">Delete</a>
      </li>
    </ul>
    <br/>
    <br/>
    <li><a href="logout.php">Logout</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

最后类型定位其前面的最后一种元素。做这样的事情

＆＃13;

#wrapper > ul > li:last-of-type {
  margin-top: 25px;
  }

#wrapper > ul > li:last-of-type a {
  color: red;
  }

#wrapper > ul > li:last-of-type a:hover {
  color: green;
  }

＆＃13;

<div id="wrapper">
  <ul>
    <li id="patches">Patches</li>
    <ul id="patches_dropdown">
      <li><a href="new_patch.php">New</a>
      </li>
      <li><a href="#">Edit</a>
      </li>
      <li><a href="#">Delete</a>
      </li>
    </ul>
   
    <li><a href="logout.php">Logout</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 3

使用#wrapper > ul > li:nth-last-of-type(1) a或#wrapper > ul > li:last-of-type a或#wrapper > ul > li:last-child a。

＆＃13;

#wrapper > ul > li:nth-last-of-type(1) a {
  color: red;
}

＆＃13;

<div id="wrapper">
  <ul>
    <li id="patches">Patches</li>
    <ul id="patches_dropdown">
      <li><a href="new_patch.php">New</a>
      </li>
      <li><a href="#">Edit</a>
      </li>
      <li><a href="#">Delete</a>
      </li>
    </ul>
    <br/>
    <br/>
    <li><a href="logout.php">Logout</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 4

使用您的选择器更具体，以避免在页面中选择其他UL。

div#wrapper > ul > li:last-of-type a:hover {
    /* styles */

}

如果两个UL都在同一个包装器中，您可以使用：

div#wrapper > ul:first-of-type > li:last-of-type a:hover {
    /* styles */
}

Answer 5

你可以使用

#wrapper > ul > li:nth-child(2)
{
color:red;
}

在css中定位最后列出的对象

5 个答案: