Question

我为我的客户购买了一个模板。此模板显示父页面CSS样式，显然适用于页面上的所有链接。（这就是关于这种特定风格的.css上的评论所说的内容）

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

Answer 1

为该部分指定一个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 {
  ...
}

Answer 2

只需创建一个新类，并为要覆盖的属性提供！important，如下所示：

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

a.mydiv{font-size: 16px !important;}/* your style  */

Answer 3

<强> 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>

Answer 4

您只需要创建一个更具体的样式来覆盖更一般的样式。您可以在此处详细了解 CSS特异性：CSS Specificity: Things You Should Know

Answer 5

你这样做：

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

选项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/

仅从一个链接中删除链接CSS样式

5 个答案: