如何对 <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

你为什么不使用 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;
}

Answer 2

好吧，在第一个示例中，您似乎没有关闭 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”是一回事。

Answer 3

不严格支持在 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>

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

How to do styling on HTML tags contained within the <a> hyperlink tag

html

tags

href

hyperlink