Question

HTML和CSS非常新，但尝试学习新技能。

我正在尝试选择嵌套在锚点和li标签内的“Read More”锚标签。我似乎无法解决将在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指出的那样，你可以使用：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>

Answer 2

在这种情况下，您可以使用： :last-child

这样的事情：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您需要更改链接外观，可以添加 :link 。像这样：

＆＃13;

ul li.Directory a:last-child:link {
  border: solid 1px #000000;
  padding: 5px;
  text-decoration: none;
}

＆＃13;

<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>

＆＃13;

顺便说一句，这是一个很好的做法，可以验证你的标记。我想向您推荐下一个链接：

这非常重要，因为它有助于我们显着遵循W3C标准，并避免浏览器之间的兼容性问题。

后代选择器帮助CSS

2 个答案: