Ориентация на конкретную гиперссылку и превращение ее в кнопку - PullRequest
Новая
       43

Ориентация на конкретную гиперссылку и превращение ее в кнопку

0 голосов
/ 30 января 2019

Итак, у меня есть страница, и я хочу изменить гиперссылку на кнопку с помощью css.

Я обнаружил, что с помощью:

a {background-color: green} это меняет цвет фона всех гиперссылок на странице и на сайте на зеленый, что делаетвсе они похожи на кнопки.Я просто хочу настроить таргетинг на одну конкретную гиперссылку, а также изменить цвет текста.

a {color: green;} ничего не делает для изменения цвета текста.

Итак, как мне настроить таргетинг на определенную гиперссылку и изменить цвет текста и фона, чтобы он выглядел как кнопка?

Я нашел div над ним, и это был awpcp-subtitle.Поэтому я попробовал awpcp-subtitle a {background-color: green;} ничего не произошло.

Существует одна гиперссылка с источником html: "Старый Гориот", ссылка - 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

Как мне изменить этот цвет и цвет фона?

Кроме того, я хочу превратить телефонную метку и номер в кнопку, которая просто говорит «смс».

Также на этой странице я хочу, чтобы изображение вписывалось в коробку.На данный момент он полностью смещен вправо в режиме просмотра с мобильных устройств и вне центра рабочего стола.

Также хотите, чтобы другой ящик окружал телефон, электронную почту и т. Д.

Решения, приведенные ниже, очень хороши, но мне было интересно, есть ли решение для всего сайта для всех гиперссылок в этом классе.Как таковой, я должен изменить каждый из них по отдельности, и это не меняет мою тему, чтобы создать ее в качестве внутренней конфигурации стиля.

Спасибо.

1 Ответ

0 голосов
/ 30 января 2019

Для этого вы можете использовать селектор атрибута .Взгляните на следующее: 

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>
...