html - 在CSS中覆盖div样式链接颜色

Question

我在我的 html 页面中放置了一个按钮(由 css 创建)。目前这个按钮继承了 div 的链接颜色。

我试图覆盖这些链接颜色并使按钮显示不同颜色的链接。

我在这样的 css 文件中创建了一个按钮样式，我很确定通过在按钮中指定链接颜色，我会自动覆盖 div 链接颜色。

.button {
  display: inline-block;
  padding: 0 14px;
  margin: 8px 0 0;
  height: 32px;
  line-height: 32px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  color: #fff;
  background: #49b1fb;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5196d5), color-stop(1, #49b1fb));
  background: -ms-linear-gradient(bottom, #5196d5, #49b1fb);
  background: -moz-linear-gradient(center bottom, #5196d5 0%, #49b1fb 100%);
  border-bottom: 1px solid #4c8cc8;
  link {text-decoration: none; color: #FFF;}
  visited {text-decoration: none; color: #FFF;}
  hover {text-decoration: none; color: #FFF;}
  active {text-decoration: none; color: #FFF;}
}

我这样使用按钮:

<div id="widecontent">
    <div id="content">
        <div id="content-inner">
            <div class="column_left">
                <h2>Download</h2>Click below to download the app:
                <br/>
                <a href="setup.exe" title="Download" class="button">Download</a>
            </div>

但是，按钮的链接颜色与div样式相同。我在 css 文件中定义的链接颜色没有显示效果。

覆盖 div 链接颜色的正确方法是什么/我做错了什么？

Answer 1

你应该像这样为悬停定义它:

.button {
  display: inline-block;
  padding: 0 14px;
  margin: 8px 0 0;
  height: 32px;
  line-height: 32px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  color: #fff;
  background: #49b1fb;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5196d5), color-stop(1, #49b1fb));
  background: -ms-linear-gradient(bottom, #5196d5, #49b1fb);
  background: -moz-linear-gradient(center bottom, #5196d5 0%, #49b1fb 100%);
  border-bottom: 1px solid #4c8cc8;
}

.button:hover {
  text-decoration: none;
  color: #FFF;
}