Question

我有一个样式表，使用@media查询和a：hover，a：visited等在一个元素中，它不起作用。 @media查询适用但来自a：hover和a：visited的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;
}  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;
     }
}

Answer 1

将顶部的#button更改为a。 id选择器优先，这就是它不会改变的原因。

Answer 2

将a:hover更改为#button:hover。由于CSS Specificity 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。

@media查询在使用a：hover，a：visited等时仍然可以在链接上工作

2 个答案: