CSS a href样式化

Question

我有一个带有 class="button" 的 href。

我想要对它进行以下样式设置：

.button a:link {text-decoration: none} 
.button a:visited {text-decoration: none} 
.button a:active {text-decoration: none} 
.button a:hover {text-decoration: none; background-color:yellow;color:blue}

为什么它不能工作？ 如何为具有该类（class="button"）的设置样式？

- Joper

---

在每个属性后面加上分号。 - Misam

@Misam。CSS规则中的最后一个属性不需要分号。 - Caspar Kleijne

哦，太棒了，我从来不知道这个……谢谢。 - Misam

@Caspar，虽然这是肯定的，但如果记得使用分号，它确实可以防止后续的问题。 - David Thomas

@Caspar 你说得没错，但这看起来实在是太丑陋和不一致了。 - user142019

Answer 1

.button a 是一个后代选择器，它匹配所有是 .button 的 后代元素的 <a> 标签。

您需要编写a.button:link来匹配既是<a>，又是.button的标签。

- SLaks

Answer 2

.button a{} 是用于

<something class="button">
   <a href="">foobar</a>
</something>

a.button{}是用于定义样式的规则。

<a href="" class="button">foobar</a>

- tereško

---

我如何为示例中的'a:link'设置规则（'.button a {}'）？ - Joper

哦...那么你只需要写.button a:link {}。 - tereško

这是我尝试的第一件事，但它没有起作用，只有这种方式才有效：a.button:link。 - Joper

Answer 3

请同时分享HTML标记。

button是锚元素的类属性还是a标签是一个具有class button的元素的子元素？

如果是前者，请使用：

a.button:link { }等

如果是后者，你的代码是正确的。

- naiquevin

Answer 4

a.button:link {text-decoration: none} 
a.button:visited {text-decoration: none} 
a.button:active {text-decoration: none} 
a.button:hover {text-decoration: none; background-color:yellow;color:blue}

- Sebastian

Answer 5

因为你说过：

“一个带有伪类:blah的a元素，它是任何元素的后代”

你想要：

a.button:link { /* etc */

- Quentin