定位特定的超链接并将其变成按钮

Question

所以我有一个页面并想使用 css 将超链接更改为按钮。

我发现通过使用：

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

a {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>