CSS优先级问题

Question

CSS优先级问题

3

我在style.css文件中有一条规则适用于整个网站：

a:hover{text-decoration:underline;color:#E35B00;}

我在button.css中也有以下内容：

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;   
    padding: .5em 1.5em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

在我的HTML页面中，我已经在button.css之前声明了style.css：

<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/button.css" media="screen" rel="stylesheet" type="text/css" />

这段代码是：

<div>
<form action="dosomething.htm" method="post">
<input type="submit" class="button blue" value="Option 1">
<a href="#" class="button green" onclick="callafunction()">Option 2</a>
</form>
</div>

蓝色按钮（选项1）没有悬停问题，因为它不是锚点。但是绿色按钮（选项2）在悬停“选项2”时会变成a:hover的颜色，即#E35B00橙色，而不是#538018;绿色！

在Firefox开发者控制台中，我看到a:hover在green:hover下面。为什么会这样？我尝试重新排列css的顺序，但没有用。a:hover接管了green:hover。这让我很困扰。感谢您的帮助。

- Jack

文本的颜色与背景不同，因此您需要覆盖文本值并设置背景颜色。为两种样式定义一个背景，它就可以正常工作了。 - user753676

@DanielRuf，您能否将您的建议发布为答案，以便我了解您的意思？谢谢。 - Jack

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- michaelpri · Accepted Answer

当你悬停在 .green 按钮上时，你从未指定文本应该是什么颜色，所以它默认为 a:hover。要解决这个问题，你只需要将 .green 按钮的颜色添加到 CSS 的 .green:hover 规则中即可。

整个 .green:hover CSS 规则应该像这样：

.green:hover {
    color: #e8f0de;
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

a:hover {
  text-decoration: underline;
  color: #E35B00;
}
.button {
  display: inline-block;
  zoom: 1;
  /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: .5em 1.5em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.green {
  color: #e8f0de;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  color: #e8f0de;
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top, #6b9d28, #436b0c);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
  color: #a9c08c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
  background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

<div>
  <form action="dosomething.htm" method="post">
    <input type="submit" class="button blue" value="Option 1" />
    <a href="#" class="button green" onclick="callafunction()">Option 2</a>
  </form>
</div>

另一种选择是在.green CSS规则中的color: #e8f0de后面加上!important。 !important使属性具有无论如何都优先的特性。

如果您想这样做，则.green规则的第一行应该是：

color: #e8f0de !important;

a:hover {
  text-decoration: underline;
  color: #E35B00;
}
.button {
  display: inline-block;
  zoom: 1;
  /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: .5em 1.5em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.green {
  color: #e8f0de !important;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top, #6b9d28, #436b0c);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
  color: #a9c08c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
  background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

<div>
  <form action="dosomething.htm" method="post">
    <input type="submit" class="button blue" value="Option 1" />
    <a href="#" class="button green" onclick="callafunction()">Option 2</a>
  </form>
</div>