Запросы @media по-прежнему работают со ссылками при использовании: hover, a: visit и т. Д.

Question

Запросы @media по-прежнему работают со ссылками при использовании: hover, a: visit и т. Д.

0

У меня есть таблица стилей, использующая как запросы @media, так и a: hover, a: visited и т.д. В одном элементе, и она не работает. Запросы @media применяются, но CSS из: hover и a: visited не работает. Мне интересно, не могут ли эти элементы работать вместе или если в моем коде есть ошибка.

Вот мой код:

#button {
     background-color: #003794;
     font-family: Helvetica;
     font-weight: bold;
     font-size: 1.9em;
     color: #0045b9;
     text-decoration: none;
         text-shadow: 0px 5px 5px #002669,
         0px 4px 4px #002c78,
         0px 3px 3px #002e7a,
         0px 2px 2px #00338a,
         0px 1px 1px #00348b;
}  a:visited {
     background-color: #003794;
     font-family: Helvetica;
     font-weight: bold;
     font-size: 1.9em;
     color: #0045b9;
     text-decoration: none;
         text-shadow: 0px 5px 5px #002669,
         0px 4px 4px #002c78,
         0px 3px 3px #002e7a,
         0px 2px 2px #00338a,
         0px 1px 1px #00348b;
} a:hover {
     background-color: #003794;
     font-family: Helvetica;
     font-weight: bold;
     font-size: 1.9em;
     color: #003794;
     text-decoration: none;
} @media all and (max-width: 50em) {
     #button {
         font-size: 1.5em;
     }
} @media all and (max-width: 40.625em) {
     #button {
         font-size: 1.25em;
     }
} @media all and (max-width: 35em) {
     #button {
         font-size: 1em;
     }
}

user3304179 18 фев. 2014, в 02:39

Источник

0

Возьмите атрибут font-size из селекторов: hover и :ited. Таким образом, размер шрифта для кнопки # будет стилизовать ссылку.
Lowkase 18 фев. 2014, в 01:13
0

Кажется, это ничего не меняет. Размер шрифта был оформлением ссылки заранее.
user3304179 18 фев. 2014, в 01:23
0

Пожалуйста, оставьте свой HTML.
Lowkase 18 фев. 2014, в 01:23

Показать ещё 1 комментарий

Теги:

html

css

hyperlink

media-queries

2 ответа

0

измените кнопку # вверху, на. Селектор id имеет приоритет, поэтому он не изменяется.

partypete25 18 фев. 2014, в 00:00

Ещё вопросы

Возьмите атрибут font-size из селекторов: hover и :ited. Таким образом, размер шрифта для кнопки # будет стилизовать ссылку.
Кажется, это ничего не меняет. Размер шрифта был оформлением ссылки заранее.

Brett DeWoody · Accepted Answer · 2014-02-18T00-25-00.000Z

Измените a:hover на #button:hover. Благодаря CSS Специфичность в a правила не применяются, поскольку #button селектор является более специфичным.

Ваш CSS также можно упростить, чтобы:

#button {
      background-color: #003794;
      font-family: Helvetica;
      font-weight: bold;
      font-size: 1.9em;
      color: #0045b9;
      text-decoration: none;
          text-shadow: 0px 5px 5px #002669,
          0px 4px 4px #002c78,
          0px 3px 3px #002e7a,
          0px 2px 2px #00338a,
          0px 1px 1px #00348b;
 }  

 #button:visited {

      color: #0045b9;

 } 

 #button:hover {

      color: #003794;

 } 

 @media all and (max-width: 50em) {
      #button {
          font-size: 1.5em;
      }
 } 
 @media all and (max-width: 40.625em) {
      #button {
          font-size: 1.25em;
      }
 } 
 @media all and (max-width: 35em) {
      #button {
          font-size: 1em;
      }
 }

Здесь работает jsFiddle.