css - 后代选择器帮助 CSS

Question

对 HTML 和 CSS 非常陌生，但正在尝试学习新技能。

我正在尝试选择嵌套在 anchor 和 li 标签内的“阅读更多” anchor 标签。我似乎无法计算出将在 CSS 中选择此标签的后代选择器。任何帮助，将不胜感激。我想在不添加任何其他类或 ID 的情况下执行此操作。

代码如下。

`<ul>
  <li class="Directory">
   <a href="#">
    <img class="icon" src="images/folder.png">
    <h4>Directory</h4>
    <h5>Map View, Locations,<br>Companies,Vendors</h5>
    <img class="line" src="images/line.png">
    <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum.   Nam pretium fringilla dignissim.</p>
    <a href="#" >Read More</a>
   </a>`

Answer 1

正如 Danny 所指出的，您可以使用 a:last-child 来定位它。我同意 makshh 的观点，你不应该将 a 嵌套在 a 中。我建议的一件事是降低目标的特异性。这是一个很好的读物，说明为什么这样做很重要，还有一个更新的例子:

Strategies for keeping CSS specificity low

.Directory a:last-child {
  border: solid 1px #000000;
}

<ul>
  <li class="Directory">
    <a href="#">
      <img class="icon" src="images/folder.png">
      <h4>Directory</h4>
      <h5>Map View, Locations,<br>Companies,Vendors</h5>
      <img class="line" src="images/line.png">
      <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p>
      <a href="#">Read More</a>
    </a>
  </li>
</ul>