定位特定的超链接并将其转换为按钮

Question

所以我有一个页面，想要改变一个超链接为一个使用css的按钮。

我通过使用以下命令发现了这一点：

A { background -color: green}这会将页面上和整个站点上所有超链接的背景颜色更改为绿色，这会使它们看起来都像按钮。我只想针对一个特定的超链接，也想改变文本的颜色。

{ color : green;}不会更改文本颜色。

那么，如何针对特定的超链接并更改文本颜色和背景颜色以使其看起来像一个按钮呢？

我在上面找到了div，它是awpcp-subtitle。所以我尝试了awpcp-subtitle a{ background-color: green;}，没有任何反应。

有一个html源的超链接："Old Goriot"，链接- http://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/10/old-goriot/london/uk/books/

link rel="amphtml" href="http://adsler.co.uk/wp-user-test- 
dashboard-2/awpcp-show-ad/amp/" /><link rel='dns- 
prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" 
title="Adsler &raquo; Feed" 
href="http://adsler.co.uk/feed/" /> 
<link rel="alternate" type="application/rss+xml" 
title="Adsler &raquo; Comments Feed" 
href="http://adsler.co.uk/comments/feed

如何更改此颜色和背景颜色？

另外，我想把电话标签和号码变成“短信”的按键。

同样在这一页上，我希望图片在框中展开。目前，它在移动视图和非中心桌面中完全向右倾斜。

也想要另一个盒子来包围电话，电子邮件等。

下面的解决方案非常好，但我想知道是否有一个站点范围的解决方案来解决这个类中的所有超链接。事实上，我必须单独更改每个样式，并且它不会修改我的主题以将其创建为固有的样式配置。

谢谢。

Answer 1

为此，您可以使用attribute selector。请看以下内容：

​

a[href="google.com"] {
  background: red;
  color: black;
}

a[href="youtube.com"] {
  background: blue;
}

a {
  color: white;
  text-decoration: none;
  padding: 5px;
}

<a href="google.com">Google</a>
<a href="youtube.com">YouTube</a>

​