0

我为我的一个客户购买了一个模板。此模板显然具有页面上所有链接的父 CSS 样式。（这就是评论在这个特定样式上面的 .css 上所说的）

现在，我在底部创建了一个部分，靠近页脚，它的背景颜色与网站的其余部分不同，所以我想以某种方式覆盖 CSS 并给它我自己的参数，而不需要对其余部分进行太多修改该网站因为灰色和白色鼠标悬停看起来不太好，这可能吗？

4

5 回答 5

2

给该部分一个 ID 属性，并在定义样式时使用它。所以像...

HTML

<div id="my-section">
  your section is here
</div>

CSS

/* your section's styling is here */
#my-section {
  ...
}

#my-section .sub-parts {
  ...
}

#my-section a {
  ...
}
于 2013-04-09T21:20:19.860 回答
1

只需创建一个新类并 !important 给您要覆盖的属性，如下所示： 

body a {font-size:10px;}/* template general style */

a.mydiv{font-size: 16px !important;}/* your style  */
于 2013-04-09T21:35:50.740 回答
0

CSS

/* Provided in your template */
a {
  color: gray;
}

/* Added for footer */
#footer a {
  color: blue; /* Or what color you want. */
}

HTML

<!-- Some HTML provided in your template -->
<div id="footer">
   <!-- Your footer content -->
</div>
于 2013-04-09T21:21:02.380 回答
0

您只需要创建一个更具体的样式来覆盖更一般的样式。您可以在此处了解有关CSS 特定性的更多信息： CSS 特定性：您应该知道的事情

于 2013-04-09T21:26:07.857 回答
0

您可以通过以下方式执行此操作：

  1. 为每个锚分配 ID
  2. 创建要在每个锚点上使用的类
  3. 通过搜索在模板中分配颜色的位置来更改默认颜色
  4. 按父元素着色并使用说明符。

选项 3 是最直接的，但会将您置于颜色不再相同的位置。而且，通常情况下，您不希望干扰模板。如果您选择非侵入式路由，那么选项 1、2 和 4 是最好的。

但是，对于大型文档和扩展，选项 1 可能会变得非常乏味，选项 2 也是如此- 因为它们必须逐个输入。如果您需要覆盖通常几个元素的颜色，通常会使用此技术。

但是，如果您使用大量锚点并且需要将这种颜色应用于它们，那么选项 4 是作为颜色分配的最佳选择，并且可以通过类规范或父元素的 id 来完成- 这大大简化了你的生命。

例子：

如果这是您的 HTML 的样子：

<a href="http://www.google.com/">Google</a>
<a href="http://www.facebook.com/">Facebook</a>
<a class="mylink" href="http://www.stackoverflow.com/">StackOverflow</a>
<a id="link1" href="http://www.wikipedia.org/">Wikipedia</a>

<div id="colorize_by_id">
    <a href="http://www.reddit.com/">Reddit</a>
</div>

<div class="colorize">
    <a href="http://www.youtube.com/">YouTube</a>
</div>

CSS 是这样定义的：

/*This is an example of what the template does to each anchor tag*/
a {
    color: green;
}

/*However, by adding a class to the anchor, you can override the "default" color.*/
a.mylink {
    color: blue;
}

/*And, if you wished to use on a case by case basis, you can do it by applying it per id*/
a#link1 {
    color: red;
}

/*Change the color of the anchors on an id by id basis*/
div#colorize_by_id a {
    color: magenta;
}

/*Change the color of the anchors on a class basis*/
div.colorize a {
    color: yellow;
}

如您所见，实际操作：http: //jsfiddle.net/4TMpy/

于 2013-04-09T21:30:28.257 回答