如何对包含在 <a> 超链接标记中的 HTML 标记进行样式设置

Question

我正在尝试使一组 HTML 标记（p、div、图像）指向同一个 URL（例如 www.worldwide_news.com）。我还希望能够以我想要的方式设置 P 内的文本样式。我已经尝试将它们全部包装在一个''标签中，但是例如P元素内的文本都显示为i）下划线..和ii）蓝色，就像它们在'a'标签中所做的那样。此外，我希望 P 内部的整个内容都是可点击的（将 P 设置为 400px 的宽度），而不仅仅是文本位。 我不想使用 JAVASCRIPT 或任何其他 JQUERY 或任何脚本，我想要一个简单的 HTML 解决方案。有人可以帮忙吗？

到目前为止，我有以下内容可以点击 URL，但无法设置文本样式：

<a href="https://www.worldwide_news.com">
    <div style="border:1px;border-style: solid;"
        <p>Here is a link to my other blog</p>
           <img src="image.jpg">
        <p>Once you get there do leave a comment!</p>
    </div>
</a>

我也试过了，没用：

    <div style="border:1px;border-style: solid;" href="https://www.worldwide_news.com">
        <p href="https://www.worldwide_news.com">>Here is a link to my other blog</p>
           <img src="image.jpg" href="https://www.worldwide_news.com">
        <p href="https://www.worldwide_news.com">>Once you get there do leave a comment!</p>
    </div>

非常感谢所有帮助！谢谢你。我会送几瓶啤酒给你，但是..

Answer 1

好吧，在第一个示例中，您似乎没有关闭 div 标签。试试：

<a href="https://www.worldwide_news.com">
    <div style="border:1px; border-style:solid;">
        <p>Here is a link to my other blog</p>
           <img src="image.jpg">
        <p>Once you get there do leave a comment!</p>
    </div>
</a>

至于你的第二个，从技术上讲，我让它工作了，但这只是通过将它包装在 <a></a> 标签中。我不认为 'p href's 是一回事。

Answer 2

不严格支持在 a 标记内使用 div，您可能希望使用 span（或不使用）。

除此之外，您唯一的问题是默认的a 样式适用于所有孩子。如果您使用 CSS 设置样式（删除下划线，重置颜色，例如 color: inherit），您应该得到您想要的。最后你需要设置display: block 让它围绕整个区块展开。

a.link {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.link p:first-child {
  font-style: italic;
}

<a class="link" href="https://example.com">
  <p>Link text one</p>
  <p>Link text two</p>
</a>

Answer 3

为什么不使用 CSS？

HTML

<a href="https://www.worldwide_news.com">
    <div style="border:1px;border-style: solid;"
        <p class="separate-link-blue">Here is a link to my other blog</p>
           <img src="image.jpg">
        <p class="separate-link-red">Once you get there do leave a comment!</p>
    </div>
</a>

CSS

.separate-link-blue {
  color: blue;
}

.separate-link-red {
  color: red;
}