Question

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

我通过使用以下方法发现了这一点：

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

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

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

我在它上面找到了div，它是awpcp-subtitle。所以我尝试了awpcp-subtitle {{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

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

此外，我想将电话标签和电话号码变成只显示“ sms”的按钮。

也在此页面上，我希望图片扩大到适合框的大小。目前，它在移动视图中和偏中心桌面中完全偏向右侧。

还希望另一个框包围电话，电子邮件等。

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

谢谢。

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>

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

1 个答案: