Html 链接类不适用于 CSS

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10322821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:59:20  来源:igfitidea点击:

class for link not working with CSS

htmlcss

提问by user1341808

I've assigned the class "greenbutton" to a link in my html, but none of the changes I make to this class on my CSS take effect.

我已将“greenbutton”类分配给我的 html 中的链接,但我在 CSS 上对此类所做的任何更改均未生效。

home.html.erb

主页.html.erb

<p><a class="greenbutton" href="#">Sign Up</a> to learn more</p>

custom.css.scss

自定义.css.scss

.greenbutton a:link, .greenbutton a:visited {
font-size: 14px;
text-decoration: none;
}

The weird thing about this is that when I assign this class to the preceding paragraph tag, the changes take effect. Any thoughts?

奇怪的是,当我将这个类分配给前面的段落标记时,更改就会生效。有什么想法吗?

回答by Brad Christie

The CSS you're trying should either be applied to the <p>or modified to a.greenbutton. What you're specifying is an anchor within an element classed greenbutton. e.g.

您正在尝试的 CSS 应该应用于<p>或修改为a.greenbutton. 您指定的是类元素中的锚点greenbutton。例如

.greenbutton a { } /* anchor inside .greenbutton-classed element, like:

  <p class="greenbutton">
    <a href="#">Foo</a>
  </p>

*/

a.greenbutton { } /* anchor with .greenbutton class applied, like:

  <a href="#" class="greenbutton">Bar</a>

*/

回答by Sampson

Your selector is wrong:

你的选择器是错误的:

.greenbutton a:link

This targets anchor links within an element that has the class "greenbutton". What you want is for the class to be on the anchor:

这针对具有“greenbutton”类的元素中的锚链接。你想要的是让班级成为锚点:

a.greenbutton:link

回答by irfanmcsd

Css class should be like this.

CSS类应该是这样的。

a.greenbutton, a.greenbutton:visited {
font-size: 14px;
text-decoration: none;
}