你如何设计<a> tags without affecting </a> <按钮> <a> tags that have a link?

Question

I was wondering as to how you could style <a> tags without affecting <button> tags.

a:hover{
text-decoration: underline;
}

<link rel="stylesheet" href="http://mrredblob.com/wordpress/wp-content/themes/homework/style.css">
<a href="#"><button>A link</button></a>

Answer 1

如果您需要为锚点使用button类似的显示 - 这样点击它就会重定向到另一个页面，您可以使用以下内容：

<button onclick="location.href='https://www.google.com'">A link</button>

onclick事件将在用户单击按钮时执行，并将用户重定向到适当的页面。

您可以通过在浏览器的新标签中粘贴以下内容来查看其效果：

data:text/html;charset=utf-8,<button onclick="location.href='https://www.google.com'">A link</button>

_{由于片段的iframe上的〜沙盒限制，它无法在片段/ JS小提琴中工作。}

Answer 2

这是你要找的吗？

<强> HTML

<a href="#">
    <button>
        <span>A link</span>
    </button>
</a>`

<强> CSS

span:hover{
  text-decoration: underline;
}

示例中的锚标记内容是一个按钮，您正在尝试设置按钮的文本修饰，而不是文本。该按钮包含文本，但该文本是按钮的子项，并且该按钮是锚点的子项。因此，锚没有文本值来应用该css属性。

这是我正在谈论的一个例子：

<强> HTML

<a href="#">Here is<button>A link</button>Some text</a>

<强> CSS

a:hover{
  text-decoration: none;
}

此外，您可以将一个包装类应用于锚点以设置子元素的样式：

.wrapper:hover * {
    text-decoration: underline;
}

<强> Codepen：

https://codepen.io/foozie3moons/pen/gGRBxZ

Answer 3

尝试简单地执行此操作：

<button><a href="#">A link</a></button>

通过这种方式，您可以根据需要设置按钮内部的文字样式。

Answer 4

我找到了一种方法！以下是：

a:not(button) {
   text-decoration: underline
}