Question

我有一个问题，基本上我想这样做

.buttonar {
    background-color: #4CAF50; /* Green */
    border: none;
    color: #FFF;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button2 {
    background-color: #008CBA;
    color: white;
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: white;
    color: black;
}

<a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate">button</a>

但问题是，我的网站已经有一个template.css（Joomla网站），其中已经设置了a，a：link，a：hover等样式。我希望我的按钮看起来与代码片段输出完全一样，但我似乎无法使其工作，因为链接保持蓝色（（几乎不可见）由模板设置）或者它只在我将鼠标悬停在链接本身而不是按钮（为：链接和a：hover创建了另一个类）。

有人可以帮我吗？

Answer 1

＆＃39; C＆＃39;在CSS中代表Cascading。这意味着CSS将查看顶部的项目，然后当它沿着工作表向下时，它将覆盖它们。

这适用于如何将文件放入HTMl中：

<强> HTML

<head>
    <!-- Insert Joomla CSS here -->
    <!-- Insert your custom CSS here -->
</head>

这将首先应用Joomla CSS，但随后您的自定义样式会覆盖它。

第二次阅读......

...如果您只谈论样式，.button2会选择HTML中包含class="button2"的元素。只需将HTML中的该类添加到您想要设置样式的按钮即可。

Answer 2

您可以在按钮中内联您的样式，它将优先。

检查this。

Answer 3

修复可能就像在你的CSS中添加！important一样简单。这会劫持级联规则，并应覆盖您的template.css规则。

此外，请确保在您放置自己的css规则的任何地方，将其放置在您的页面上调用template.css之后。将它放在头部标签中的任何位置可能是不够的。我首先要找出调用template.css的位置（通常在链接标记中）并在其后面放置一个带有！important标记的css。

有关此问题的信息：https://css-tricks.com/when-using-important-is-the-right-choice/

宋

悬停时链接文本颜色

3 个答案: