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;
}

Answer 2

您将属性与伪类混淆（:active / :hover等）

所以你应该在规则之外使用它们，而不是在里面。

.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:visited {
  color: green
}

.button:focus {
  color: purple
}

.button:hover {
  color: red
}

.button:active {
  color: yellow
}

I use the button like this:

<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>

覆盖css中的div样式链接颜色

2 个答案: