如何对<a>超链接标签</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'是一回事。

Answer 2

不严格支持在a -tag 中使用div ，您可能想要使用span （或不使用）。

除此之外，您唯一的问题是默认a styles 适用于所有孩子。 如果您使用 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;
}